using mutation and useQuery together on post api

[dante01yoon]

Greetings,

Is this normal case using useMutate, useQuery together in single component?

data should be fetched manually using mutation (click button),

but should be cached and viable later with out fetch if data is cached.

so here is how I organize code.

const useManualMutate = (data) => {
  return useMutation ({
    mutationFn: postFn,
    onSuccess:  (v) => {
       queryClient.invalidateQueries([ QUERY_KEY, data]);
    }
  })
}

const usePostData =(data,) => {
   return useQuery({
      queryKey: [ QUERY_KEY, data],
      queryFn: postFn,
      enabled: false,
      keepPreviousData: true,
      refetchOnWindowFocus: false,
   })
}

...

const MyComponent = () => {
   const [data, setData] = useState();
   const { mutate} = useManualMutate(data);
   usePostData(data); 
  .... 
  return (
    <button onClick={() => mutate(data)}> fetch </button>
  )
}

the problem is queryInfos returned by usePostData keep saying
status: 'loading', fetchStatus: 'idle', isLoading: true, isSuccess: false, isError: false, ...
and seems this query doesn't be invalidated after onSuccess callback called in usePostData.

is this happened because of enabled: false ?

[TkDodo]

queries that are enabled: false, are not targeted by invalidateQueries because they are not enabled.

Mutations are not meant for data fetching. The result of your mutation also never makes it into the query cache, because you'd need to manually put it there. What you are likely looking for is lazy queries:
https://tanstack.com/query/v4/docs/react/guides/disabling-queries#lazy-queries