查询数据不能是未定义的。请确保从查询函数中返回除未定义之外的值

Question

我使用 useQuery 钩子向 graphql 端点发送请求，我使用react.js 和 next.js。此请求是为了在我的网站上显示项目列表。当我在 Chrome 浏览器的检查工具中检查网络选项卡时，请求正常，显示响应数据没有问题，但在控制台中，我收到以下错误：

查询数据不能是未定义的。请确保从查询函数中返回除 undefined 以外的值。受影响的查询键：[“newProjects”]

错误：在解析时 (retryer.mjs?bd96:54:1) 处的 Object.onSuccess (query.mjs?b194:316:1) 处未定义

我创建了一个钩子来发出请求并获取另一个组件中的数据：

import { useQuery } from "@tanstack/react-query";
import { request, gql } from 'graphql-request'
import { endpointProjects } from "../settings";

export function useAllProjects() {

  return useQuery(
    ['newProjects'],
    async () => {
      const data = await request(
        endpointProjects.newProjects,
        gql`
        query MyQuery {
            newProjects(orderBy: blockTimestamp, orderDirection: desc, first: 10, skip: 0) {
              id
              project
              name
              symbol
              uri
              blockNumber
              blockTimestamp
              transactionHash
            }
          }
      `,
      )
    }
  )
}

在另一个组件中，我只是使用钩子并将其显示在控制台中以查看是否获取数据：

const {data} = useAllProjects()
console.log('projects list: ', data)

Answer 1

您的查询函数不会返回任何内容，因为您有这些，但其中{}没有 a 。您可以像在docreturn上一样给useQuery一个带有隐式键的对象，并使用箭头函数，这样您的查询函数就会返回以下结果：request(...)

// imports 

export function useAllProjects() {
  return useQuery({
    queryKey: ["newProjects"],
    queryFn: async () =>
      request(
        endpointProjects.newProjects,
        gql`
          query MyQuery {
            newProjects(orderBy: blockTimestamp, orderDirection: desc, first: 10, skip: 0) {
              id
              project
              name
              symbol
              uri
              blockNumber
              blockTimestamp
              transactionHash
            }
          }
        `
      ),
  });
}