Gatsby Link 重置 Apollo 客户端

Posted 2023-03-10

【中文标题】Gatsby Link 重置 Apollo 客户端

【英文标题】：Gatsby Link Resets Apollo Client

【发布时间】：2021-04-20 12:14:09

【问题描述】：

我正在尝试使用 Apollo 客户端实现 Gatsby

这是我的 gatsby-browser.js 文件

export const wrapPageElement = ( element, props ) => 
  const client = new ApolloClient(
    uri: "http://localhost:3000/graphql",
    cache: new InMemoryCache(),
    credentials: "include",
  );
  window.a = client;
  return (
    <CookiesProvider>
      <ApolloProvider client=client>
        <ChakraProvider theme=theme ...props>
          element
        </ChakraProvider>
      </ApolloProvider>
    </CookiesProvider>
  );
;

我将我的登录用户详细信息保存在 GraphQL 缓存中，以便可以在我的应用程序中的任何位置访问它。这是登录的代码

 const [login,  data, error ] = useMutation(AUTH_USER, 
    onCompleted: ( login: data ) => 
      try 
        client.writeFragment(
          id: "me",
          fragment: FRAGMENTS_USER.all_details,
          data: data,
        );
        setToken(data.token);
       catch (e) 
    ,
  );

我的问题是导航时正在重置缓存。因此，使用 gatsby-link 或 gatsby-navigation 正在重置我的缓存

我一直在使用 NextJS，这是我第一次在 Gatsby 中编写应用程序，但在这种情况下，它的行为似乎不像单页应用程序。

【参考方案1】：

wrapPageElement 和 wrapRootElement API 需要跨 gatsby-browser.js 和 gatsby-s-s-r.js 使用。两个文件需要共享相同的内容以避免持久性错误。所以，在你的gatsby-s-s-r.js：

export const wrapPageElement = ( element, props ) => 
  const client = new ApolloClient(
    uri: "http://localhost:3000/graphql",
    cache: new InMemoryCache(),
    credentials: "include",
  );
  window.a = client;
  return (
    <CookiesProvider>
      <ApolloProvider client=client>
        <ChakraProvider theme=theme ...props>
          element
        </ChakraProvider>
      </ApolloProvider>
    </CookiesProvider>
  );
;

正如您在Gatsby's docs 中看到的：

注意：Gatsby’s Browser API 中有一个等效的钩子。它是 建议同时使用这两个 API。例如用法，请查看 Using redux.

也许这可以解决您的问题。