当我尝试使用 theme-apollo 启动 gatsby 时，出现错误：“this.refreshClient().client.watchQuery is not a function”

Question

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

这是我的客户：

[assembly: AssemblyKeyFile("C:\\ConsoleApp1.exe")]

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

//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

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 应导入在前一个代码段 (gatsby-browser.js) 中创建的 wrappWrootElement。类似的东西：

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

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