useQuery used only key => "Missing queryFn" error

[gronxb]

Hello, I need your help:sob:

I got the data by setting queryFn in queryClient with setQueryDefaults and setting only the key in useQuery from the child components. In this case, it will be good work, but the "Missing queryFn error" is being output to the console. Can't I just use the only key for useQuery?

case:

//... querys
queryClient.setQueryDefaults(["user"], {
  queryFn: () => fetchPromise("user")
});

// ... components used
const {data} = useQuery(["user"]); // this work ! but console.error

[TkDodo]

this should work. please provide a codesandbox reproduction showing the issue, thanks.

[gronxb]

Thank you!! I mistake during implementation websocket query.

[samiUllah1526]

I am facing the same issue but I don't know what I'm missing. can you please looking into it?

When use only axios its return the data but when I use react query it says "Missing queryFn"

API function

const getTasks = async () => { const response = await privateApi.get("/tasks", getAuthorizationHeader()); return response.data; };

Query

`
const {
isLoading,
isError,
error,
data: tasksdata,
} = useQuery("tasks", getTasks);

console.log({ isLoading, isError, error, tasksdata });
`

[vezaynk]

@TkDodo Would it be possible to wrap the returned errors of this kind in an Error object?

[TkDodo]

Yes, we are doing that in v5

[jhoanborges]

+1 same issue

[frederikhors]

Are you using v4 or v5?

[hamedtahmasebi]

Experiencing the same issue in
"@tanstack/react-query": "^5.56.2",

I am using the query in a container ( page level ) with the queryFn, and using it only with keys in subcomponents,

The main page:

const Page = () => {

  const { refetch, error } = useQuery({
        queryFn: async () => {
            return await HistoryApi.getHistoryData(filterOptions)
        },
        queryKey: [HistoryApi.QueryKeys.GET_HISTORY_DATA],
        retry: failureCount => failureCount < 3,
    })
    return (<>...</>)
}

subcomponents:

const SubComp = () => {

    const { data: historyData, isFetching: isFetchingHistoryData } = useQuery({
        // queryFn: async () => {
        //     return await HistoryApi.getHistoryData(filterOptions)
        // },
        queryKey: [HistoryApi.QueryKeys.GET_HISTORY_DATA],
    })
    return <>...</>
}

Error: Missing queryFn: '["GET_HISTORY_DATA"]'
    at utils.ts:418:22
    at Object.fetchFn [as fn] (query.ts:422:14)
    at run (retryer.ts:157:49)
    at Object.start (retryer.ts:222:9)
    at _a4.fetch (query.ts:539:26)
    at _a9.executeFetch_fn (queryObserver.ts:337:71)
    at _a9.onSubscribe (queryObserver.ts:98:9)
    at _a9.subscribe (subscribable.ts:11:10)
    at useBaseQuery.ts:85:22
    at subscribeToStore (react-dom.development.js:16139:10)

[TkDodo]

If I want to use react query to store and share local data

This is not recommended, so there is no “best way” to do it. The recommendation is to use a client-state manager like zustand, redux, jotai, valtio, useState + react context, whatever.. but not react-query.

[vendramini]

Are there technical reasons to not be recommended? Because honestly I've been doing it for a long time and it's been working pretty well, I've never had problems. It makes my work much easier than having to deal with 2 different approaches - also, demanding less third-party libraries which means less code maintenance. Specially with react-native, using the plugin to store data locally is really handy.

[TkDodo]

query is an async state manager, not a synchronous state manager. We do batching and revalidation and have timers for async needs. Not only do you need to come up with a unique key for everything and have your environment query data be of type string | undefined instead of just string, there might also be one render cycle where it’s undefined at runtime, followed by a render cycle where data from the queryFn is returned. Are there ways around that? Sure, but your code isn’t doing it.

Same as sticking data from an API request into manual redux with thunks was a bad idea, so is doing the opposite - putting everything into react-query. Synchronous state and Asynchronous state have different needs, that’s why we recommend different state managers for them.

Mandatory watch from 4 years ago, still gold: https://www.youtube.com/watch?v=seU46c6Jz7E

[vendramini]

Sorry delay, I've been too busy.

You are right, that video explains a lot.

So, the ideally flow would be to fetch X from server, copy its content to some local store management (Zustand, Context, jotai, useState), do whatever we need to do, update the server then update react-query again if needed?

[guseggert]

This pattern is also recommended by jotai-tanstack-query, see ex https://github.com/jotaijs/jotai-tanstack-query?tab=readme-ov-file#incremental-adoption

[Meligy]

It might be worth noting that one of the official examples in the docs is throwing this error:
React Example: Nextjs App Prefetching
https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching
(I'm unable to run it on the page itself, but clicking the Stackblitz link brings it)

The example seems fairly innocent. I'm unable to tell what might be wrong.

The stack trace seems to mention the hydration boundary, but nothing more than that.

[TkDodo]

The example doesn't work in stackblitz. If you check it out and run it locally, it works fine.