I'm sending a request to a graphql endpoint using a useQuery hook, I work with react.js and next.js. This request is to show a list of projects on my website. When I check the network tab in the inspect tool in chrome browser, the request is ok, showing the response data without problem, but in the console, I got the next errors:

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["newProjects"]

Error: undefined at Object.onSuccess (query.mjs?b194:316:1) at resolve (retryer.mjs?bd96:54:1)

I created a hook to make the request and get the data in another component:

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
            }
          }
      `,
      )
    }
  )
}

In another component, I just use the hook and show it in the console to see if I get the data:

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

I'm sending a request to a graphql endpoint using a useQuery hook, I work with react.js and next.js. This request is to show a list of projects on my website. When I check the network tab in the inspect tool in chrome browser, the request is ok, showing the response data without problem, but in the console, I got the next errors:

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["newProjects"]

Error: undefined at Object.onSuccess (query.mjs?b194:316:1) at resolve (retryer.mjs?bd96:54:1)

I created a hook to make the request and get the data in another component:

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
            }
          }
      `,
      )
    }
  )
}

In another component, I just use the hook and show it in the console to see if I get the data:

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

• javascript
• reactjs
• next.js
• graphql
• react-query

• 2 This is also a useful thread regarding this issue: github.com/TanStack/query/discussions/4457 – nerdess Commented May 24, 2023 at 11:06

1 Answer 1

Your query function does not return anything, as you have those {} and not a return in them. You can give useQuery an object with implicit keys like on the doc, and use an arrow function, so your query function returns the result of 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
            }
          }
        `
      ),
  });
}