在 Gatsby 中使用 ApolloClient 与 localhost / 本地 IP uri

Posted 2023-03-08

【中文标题】在 Gatsby 中使用 ApolloClient 与 localhost / 本地 IP uri

【英文标题】：Use ApolloClient in Gatsby with localhost / local IP uri

【发布时间】：2020-07-21 00:51:01

【问题描述】：

我正在尝试将ApolloClient 与本地IP 一起使用为uri，但是当我设置它时，它会自动将其从http 更改为https，当然，它在本地不起作用。

我尝试了两种配置Gatsby 以使用ApolloClient 的方法。

第一种方法是在gatsby-browser 中，如下所示：

    import React from 'react';
    import 'core-js/modules/es6.set';
    import 'core-js/modules/es6.map';
    import 'raf/polyfill';
    import Apollo from 'providers/Apollo';

    export const wrapRootElement = ( element ) => <Apollo>element</Apollo>;

还有，ApolloClient 配置：

    import React from 'react';
    import  ApolloProvider, ApolloClient, InMemoryCache  from '@apollo/client';

    export default ( children ) => 
      const client = new ApolloClient(
        uri: 'http://192.162.1.112:4000/graphql',
        cache: new InMemoryCache(),
        request: async operation => 
          ...
        ,
        fetchOptions: 
          mode: 'no-cors',
        ,
      );

      return <ApolloProvider client=client>children</ApolloProvider>;
    ;

第二种方法是在gatsby-config中使用插件gatsby-plugin-apollo像这样

    
       resolve: 'gatsby-plugin-apollo',
       options: 
         uri: 'http://192.168.1.112:4000/graphql'
       
    

注意uri 和http。 此外，它是其中之一，而不是两者。 （虽然我都试过了，结果一样）。

这就是我尝试在网络选项卡中进行gql 查询的原因：

它正在执行https，我无法在本地测试。如何使用Gatsby 和ApolloClient 向http 发出请求？

顺便说一句，我在另一个不使用Gatsby的项目中设置ApolloClient就像这样（显然也没有使用gatsby插件）并且它按预期工作。

【参考方案1】：

在您使用 apollo 客户端的方式中有一些令人困惑的事情。 解释已经完成的事情是没有意义的。

您可能想查看 Jason Lengstorf 的演讲和演示。在这里，他解释了如何开始使用 gatsby + apollo 客户端。

Youtube

gatsby-with-apollo