absent-sapphire

Unable to troubleshoot "Missing queryFn"

Hello, I not able to troubleshoot this error. I am on Nextjs 13 I have a page /profile that loads up fine the first time user logs in (router.push('/profile') onsuccess) . This page has a component ProfileMain that calls :

const { data: userData, isLoading } = useQuery(
    ["userData", userId],
    () => fetchUserData(userId),
    {
      retry: false,
      onSuccess: (data) => {
       ...
      },
      onError: (error) => {
        ...
      },
      onSettled: () => {},
    },
  );

const { data: userData, isLoading } = useQuery(
    ["userData", userId],
    () => fetchUserData(userId),
    {
      retry: false,
      onSuccess: (data) => {
       ...
      },
      onError: (error) => {
        ...
      },
      onSettled: () => {},
    },
  );

I have another page /linked which has a next/Link to /profile. When clicking on this link I am routed back to /profile but I keep getting "Missing queryFn" error every few seconds Help please?!

21 Replies

absent-sapphireOP•3y ago

Also, I am using this in /linked

const { data: userData, status: userFetchStatus } = useQuery(
    ["userData", user?.uid],
    () => fetchUserData(user?.uid!),
    {
      enabled: !!user,
      onSuccess: () => {
        ...
      },
    },
  );

const { data: userData, status: userFetchStatus } = useQuery(
    ["userData", user?.uid],
    () => fetchUserData(user?.uid!),
    {
      enabled: !!user,
      onSuccess: () => {
        ...
      },
    },
  );

broad-brown•3y ago

Hi which version of Tanstack query are you using?

broad-brown•3y ago

https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object

Migrating to TanStack Query v5 | TanStack Query Docs

Breaking Changes v5 is a major version, so there are some breaking changes to be aware of:

absent-sapphireOP•3y ago

"@tanstack/react-query": "^4.28.0",

broad-brown•3y ago

ok so not v5… Could you create a reproduction sandbox ?

absent-sapphireOP•3y ago

Will be hard because my queries are dependent on auth. what would you need for more context?

broad-brown•3y ago

Not sure. Did you check at react-query-dev-tools ? Did you try breakpoint in react query code when missing queryFn error is raised and analyse the stack to find the culprit query? Could fetchUserData in your queryFn return undefined? The problem could come from the ! . I'm not into TS, but ! seems related to undefined/null value. You should keep queryKey and queryFn "aligned" in terms of what is used. So here they could be mis-aligned.

absent-sapphireOP•3y ago

It seems to be stuck on fetching Not in this case. Even if did, that would be a different error okay let me try without it

broad-brown•3y ago

Maybe something wrong in fetchUserData? Hard to say something meaningful without a working example to play with 😅

absent-sapphireOP•3y ago

Wierd thing is this only happens when I navigate from another page where I am using the same query with same query key. If I enter the URL directly in the browser or if I am sent to /profile after login, it works fine.

broad-brown•3y ago

ok maybe a non stable queryClient?

broad-brown•3y ago

https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

React Query FAQs

Answering the most frequently asked React Query questions

absent-sapphireOP•3y ago

It is initialized inside useState in app

absent-sapphireOP•3y ago

So the issue is because of using the same query keys between nextjs routes. I changed the querykey on /linked and now it works fine. https://dev.to/endymion1818/using-react-query-with-nextjs-router-kk8 - This kind of explains it But I still think I should be able to use the same query key if I am fetching the same data

DEV Community

Using react-query with NextJS router

React query is a fantastic tool which I've really enjoyed using recently. But we found a few times where we have been using it in close conjunction with multiple requests where it seemed to be returning the same dataset for different queries. Here's what was going on.

broad-brown•3y ago

Hum strange. Never use NextJS but from a pure React Query PoV, a query is made of a key to identify a set of data. Same key => same data. It should not matter on using Next or not.

broad-brown•3y ago

Just in case, are you aware of the official doc? https://tanstack.com/query/v4/docs/react/guides/ssr

SSR | TanStack Query Docs

React Query supports two ways of prefetching data on the server and passing that to the queryClient. Prefetch the data yourself and pass it in as initialData

broad-brown•3y ago

I'm sorry but I won't be able to help more on this…

equal-aqua•3y ago

you should definitely be able to use the same queryKey in multiple places, if it fetches the same data. please show a codesandbox reproduction

absent-sapphireOP•3y ago

Sorry for late reply, but this issue was fixed. One of our newer devs had used a usequery without a queryFn deep inside one of the components. Not sure why typescript didn't catch it. Thanks for the help

equal-aqua•3y ago

Typescript doesn't catch it because the queryFn is technically optional, as you can define a global one. Only the key is required

like-gold•3y ago

Hey Guys I am getting the same warning when I invalidate the query with the refetchType: 'all' param. 1. How I invalidate:

await queryClient.invalidateQueries({
            queryKey: [CONSTANTS.API_ROUTES.GET_APTLET_INSTANCE_BY_ID],
            refetchType: 'all',
          });

2. How I fetch the data:

export const useGetAptletInstanceById = (id) => {
  const queryFn = () =>
    apiCall({
      endpoint: generateApiEndpoint(CONSTANTS.API_ROUTES.GET_APTLET_INSTANCE_BY_ID),
      args: { id, decorate: true },
    });

  return useQuery({
    queryKey: [CONSTANTS.API_ROUTES.GET_APTLET_INSTANCE_BY_ID, id],
    queryFn,
  });
};

Gaming

Programming

Unable to troubleshoot "Missing queryFn"

Did you find this page helpful?