Apollo React - ApolloClient 设置中的“useMutation”？答案

【问题标题】：Apollo React - `useMutation` in ApolloClient setup?Apollo React - ApolloClient 设置中的“useMutation”？
【发布时间】：2020-05-18 14:21:51
【问题描述】：

我有一个有趣的情况。

我想使用 Apollo 本身发起刷新令牌请求（也就是调用突变）

任何想法，如何实现这样的目标？

export default new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError, operation, forward }) => {
      // useMutation(REFRESH_ACCESS_TOKEN)
    }),
  ]),

  new HttpLink({...}),
})

基本上，我只是在创建新的 ApolloClient 实例时尝试将 useMutation(REFRESH_ACCESS_TOKEN) 放入 onError 中。

问题： Invalid hook call. Hooks can only be called inside of the body of a function component.

谢谢。

【问题讨论】：

嗯，这里的主要问题是，我不想使用 axios 获取访问令牌，而是想使用 graphql 的突变来获取它。由于后端本身将刷新作为突变提供。或者换句话说，主要问题是我基本上试图在类初始化中使用 React Hooks。
您可能正在寻找类似github.com/sysgears/apollo-universal-starter-kit/blob/…

标签： javascript reactjs react-hooks apollo

【解决方案1】：

您不能在功能性 React 组件之外使用钩子。您可以直接使用客户端进行查询和变更 - 请记住，以这种方式运行的任何查询都不会被观察到（即，如果缓存更改，则不会更新）。

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError, operation, forward }) => {
      client.mutate({ mutation, variables })
        .then(({ data }) => {
          console.log(data)
        })
        .catch((error) => {
          console.log(error)
        })
    }),
    new HttpLink({...}),
  ]),
})

export default client

【讨论】：

我认为这可能是一个解决方案。我也想把client.mutate 的部分封装到阿波罗的return new Observable(observer => {...})