Не удается найти полевого пользователя для объекта ROOT_QUERY - Apollo Client 3 + apollo-cache-persist - PullRequest
Новая
       8

Не удается найти полевого пользователя для объекта ROOT_QUERY - Apollo Client 3 + apollo-cache-persist

0 голосов
/ 03 марта 2020

Использование Apollo Client 3.0 Beta и попытка интеграции с сохранением кеша.

Я получаю ошибку

Uncaught (в обещании) Ошибка: ошибка сети: Can ' Найти пользователя поля на объекте ROOT_QUERY

И, достаточно верно, мой кэш (в Apollo Dev Tools) полностью пуст. Я не уверен почему. Я попытался смоделировать кеш-сохранение как можно ближе к примеру из документации.

Интересно, что ни один из моих console.log (с результатом запроса) не вызывался каждый раз. Прежде чем пытаться интегрировать сохранение кэша, вход и регистрация работали просто отлично. Но, очевидно, я хотел бы, чтобы люди могли обновлять sh страницу и при этом входить в систему.

Есть идеи, что я делаю неправильно? 

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://xxxxxx.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
    }
  }
`;
...