"Can't find field user on ROOT_QUERY object"

hatchli commented 4 years ago

Using Apollo Client 3.0 Beta and trying to integrate cache-persist. The error I'm getting is Uncaught (in promise) Error: Network error: Can't find field user on ROOT_QUERY object And, true enough, my Cache (under Apollo Dev Tools) is completely empty. I'm not sure why. I tried to model cache-persist as closely to the example from the docs. Interestingly, none of my console.log's (with the result of the query) every get called.

import React, { Fragment, useState, useEffect } from "react";
import { Modal } from "@redq/reuse-modal";
import { ApolloProvider } from "@apollo/client";
import "@redq/reuse-modal/es/index.css";
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { resolvers, typeDefs } from "../Resolvers";
import { setContext } from "@apollo/link-context";
import { persistCache } from "apollo-cache-persist-dev";
import fetch from "node-fetch";
import { IS_CURRENTLY_LOGGED_IN } from "../MutationsQueries";

export default ({ Component, pageProps }) => {
  const [client, setClient] = useState(undefined);

  useEffect(() => {
    const cache = new InMemoryCache();
    const dev = "http://localhost:3001/";
    const prod = "https://prisma2-graphql-yoga-shield.now.sh/";

    const httpLink = createHttpLink({
      uri: dev,
      onError: ({ networkError, graphQLErrors }) => {
        console.log("graphQLErrors", graphQLErrors);
        console.log("networkError", networkError);
      },
      credentials: "include",
      fetch
    });

    const authLink = setContext((_, { headers }) => {
      // get the authentication token from local storage if it exists
      const user = client.readQuery({
        query: IS_CURRENTLY_LOGGED_IN
      });
      const token = localStorage.getItem("token");
      // return the headers to the context so httpLink can read them
      return {
        headers: {
          ...headers,
          authorization: token ? `Bearer ${user.token}` : ""
        }
      };
    });

    const client = new ApolloClient({
      ssrMode: true,
      disableOffline: true,
      link: authLink.concat(httpLink),
      cache,
      typeDefs,
      resolvers
    });

    const data = {
      isLoggedIn: false,
      currentlyLoggedIn: [],
      networkStatus: {
        __typename: "NetworkStatus",
        isConnected: false
      }
    };

    cache.writeData({ data });

    persistCache({
      cache,
      debug: true,
      storage: window.localStorage
    }).then(() => {
      client.onResetStore(async () => cache.writeData({ data }));
      setClient(client);
    });
    return () => {
      const user = client.readQuery({ query: IS_CURRENTLY_LOGGED_IN });
      console.log(user);
    };
  }, []);
  if (client === undefined) return <div>Loading...</div>;
  return (
    <ApolloProvider client={client}>
      <Fragment>
        <Modal />
        <Component {...pageProps} />
      </Fragment>
    </ApolloProvider>
  );
};


export const IS_CURRENTLY_LOGGED_IN = gql`
  query isUserCurrentlyLoggedIn {
    isLoggedIn @client
    user @client {
      name
      user_id
      email
      token
      isLoggedIn
    }
  }
`;