使用 useQuery 进行批处理反应钩子返回未定义答案

【问题标题】：Batching with useQuery react hooks getting back undefined使用 useQuery 进行批处理反应钩子返回未定义
【发布时间】：2020-11-13 15:59:48
【问题描述】：

我目前正在从事一个需要我进行多个查询/突变的项目。我尝试使用 BatchHttpLink 设置我的 apollo 客户端，我可以在浏览器的网络选项卡中看到我请求的数据。它返回的是对象数组而不是 JSON。

但问题是当我尝试抓取组件中的数据时，数据未定义。我尝试使用 HttpLink 而不是 BatchHttpLink，我可以从钩子中取回数据。

我怀疑从响应中返回的对象的形状不同，我尝试查看文档，但找不到太多关于批处理的信息。

目前使用"@apollo/client@^3.0.2"

这是我的客户端设置。

import { ApolloClient, InMemoryCache, ApolloLink, from } from '@apollo/client'
import { BatchHttpLink } from '@apollo/client/link/batch-http'
import { onError } from '@apollo/client/link/error'

const BASE_URL = 'http://localhost:4000'
const httpLink = new BatchHttpLink({
  uri: BASE_URL,
  credentials: 'include',
})
const csrfMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      'X-CSRF-Token': getCSRFToken(),
    },
  }))
  return forward(operation)
})
const errorMiddleware = onError(({ networkError }) => {
  if (networkError && 'statusCode' in networkError && networkError.statusCode === 401) {
    window.location.assign('/accounts/login')
  }
})
const client = new ApolloClient({
  link: from([errorMiddleware, csrfMiddleware, httpLink]),
  cache: new InMemoryCache(),
})

这是我试图控制日志的反应钩子。

const {data} = useQuery(GET_USER_PERMISSIONS_AND_PREFERENCES)

【问题讨论】：

标签： undefined react-apollo apollo-client batching react-apollo-hooks

【解决方案1】：

想通了。您需要添加另一个中间件来返回 useQuery 挂钩可以识别的数据。批处理调用中返回的数据是形状对象数组

{ 
  payload: {
    data: { ... }
  }
}

所以这样的事情对我有用

const batchParseMiddleware = new ApolloLink((operation, forward) => {
  return forward(operation).map((data: any) => data.payload)
})

【讨论】：

【解决方案2】：

我遇到了类似的问题，到目前为止只能通过中断批处理并转换为普通的 HttpLink 来解决它

【讨论】：