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

Posted 2023-03-10

【中文标题】使用 useQuery 进行批处理反应钩子返回未定义

【英文标题】：Batching with useQuery react hooks getting back undefined

【发布时间】：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)

【参考方案1】：

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

 
  payload: 
    data:  ... 
  

所以这样的事情对我有用

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

【参考方案2】：

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