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

Posted 2023-03-08

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

【英文标题】：When i try to start gatsby with theme-apollo i get the error: "this.refreshClient().client.watchQuery is not a function"

【发布时间】：2021-04-01 09:07:10

【问题描述】：

我建立了一个 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-s-s-r 和 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>

  )
;

【参考方案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-s-s-r.js 应该导入在之前的 sn-p (gatsby-browser.js) 中创建的 wrappWrootElement。比如：

export wrapRootElement from './gatsby-browser';

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

【讨论】：

是的，s-s-r 脚本确实导出了 wrapRootElement。我像你给我看的那样改变了它，但没有任何改变......仍然是同样的错误

我已经添加了一个基于您的用例的工作仓库：github.com/myhendry/fs-web/blob/master/src/utils/apollo/…