当我尝试使用 theme-apollo 启动 gatsby 时，出现错误：“this.refreshClient().client.watchQuery 不是函数”

Question

我建立了一个 gastby 项目。我想和 apollo-client 一起工作。我安装了插件“gatsby-plugin-apollo”，我也将它插入到配置文件的插件数组中。我创建了一个客户端并将其添加到 ApolloProvider。当我尝试将它与现有查询一起使用时，出现错误：

这是我的客户：

//client.js
    import fetch from 'isomorphic-fetch';
    import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
    import { backendUrl } from "../constants/constants"

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: backendUrl,
    fetch
  })
});
export default client

这是我在 gatsby-ssr 和 gatsby-browser 文件中导出的 wrapRootElement

    import React from 'react';
import { ApolloProvider } from '@apollo/client';
import client from "./client"
import AuthProvider from '../context/auth';

export const wrapRootElement = ({ element }) => {
  return (

    <ApolloProvider client={client}>{element}</ApolloProvider>

  )
};

Answer 1

您的gatsby-browser.js 看起来不错，理想的结构应该是这样的：

import React from 'react';
import fetch from 'isomorphic-fetch';
import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client';

const cache = new InMemoryCache();

// eslint-disable-next-line react/prop-types
export const wrapRootElement = ({element}, {uri, headers, credentials}) => {
  const client = new ApolloClient({
    fetch,
    uri,
    headers,
    credentials,
    cache
  });
  return <ApolloProvider client={client}>{element}</ApolloProvider>;

正如我所说，你的看起来不错。但是，您的gatsby-ssr.js 应该导入在之前的 sn-p (gatsby-browser.js) 中创建的 wrappWrootElement。比如：

export {wrapRootElement} from './gatsby-browser';

您可能会发现以下working GitHub 有用，而此Spectrum thread。