将 Apollo 客户端或同构 Fetch 与 GraphiQL 结合使用答案

【问题标题】：Use Apollo Client or Isomorphic Fetch with GraphiQL将 Apollo 客户端或同构 Fetch 与 GraphiQL 结合使用
【发布时间】：2019-03-01 09:06:42
【问题描述】：

我正在尝试将 GraphiQL IDE 集成到我的网站中，我想知道是否可以就我是否最好使用网站其余部分使用的 Apollo 客户端或使用文档中推荐的 Isomorphic Fetch 获得一些建议。

如果我使用 Apollo 客户端，那么我只需担心一个连接，无需考虑确保身份验证正确，但代码更复杂。

我的这段代码适用于 fetcher 函数，但到目前为止它只适用于查询，据我了解，还需要大量的工作来处理突变。

graphQlFetcher = (params) => {
    return this.props.client.query({
        query: gql`
            ${params.query}
        `
    }).then(function(result) {
        return result;
    });
}

另外还有同构提取方法，但要使其工作，我需要先获取身份验证令牌，而且我还没有足够好的承诺来完成这项工作。不工作的代码：

import { Auth } from 'aws-amplify';

getToken = async () => {
    const session = await Auth.currentSession();
    return session.accessToken.jwtToken;
}

graphQLFetcher = (graphQLParams) => {
    return getToken().then(function(token) {
        fetch(window.location.origin + '/graphql', {
            method: 'post',
            headers: { 
                  'Content-Type': 'application/json',
                  "Authorization": token
              },
            body: JSON.stringify(graphQLParams),
          }).then(response => response.json());
    })
}

感谢有两种可能的方法来解决这个问题，这既是一个技术问题，也是一个设计问题，但希望有人能帮助我。

【问题讨论】：

标签： graphql apollo-client graphiql

【解决方案1】：

第一个很好，但是那里有一些多余的语法。这是我使用的：

params => client.query({ ...params, query: gql(params.query) });

【讨论】：