时间戳

首页 > 解决方案 > 使用 useQuery 进行批处理反应钩子返回未定义

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

问题描述

我目前正在从事一个需要我进行多个查询/突变的项目。我尝试使用 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)

标签： undefinedreact-apolloapollo-clientbatchingreact-apollo-hooks

解决方案

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

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

所以像这样的东西对我有用

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

推荐阅读