Possible to make particular instance of useQuery disabled after initial fetch?

[donysukardi]

I have an use case where i fetch data using useQuery and then pass it on to EditForm. Upon successful edit, the query get invalidated the page redirects.

Is it possible to make the particular useEntryQuery not subscribe to the invalidation updates?

function EditPage() {
  const queryClient = useQueryClient();
  const entryQuery = useEntryQuery();
  const editMutation = useEditMutation({
    onSuccess: () => {
      queryClient.invalidateQueries("entry");
      doRedirection();
    }
  });
  
  function handleSubmit() {
    editMutation.mutate();
  }
  return <EditForm initialValues={entryQuery.data} onSubmit={handleSubmit} />
}

I suppose one way to go around it is to disable the query as soon as it becomes successful. But I'm hoping there's something built-in to handle this kind of scenario.

function EditPage() {
  const [isQueryEnabled, setIsQueryEnabled] = React.useState(true);
  const entryQuery = useEntryQuery({
    onSuccess: () => setIsQueryEnabled(false),
    enabled: isQueryEnabled
  });
}

[TkDodo]

what are you trying to achieve by disabling the query? once you do the redirect, I assume the entryQuery is unmounting anways, no?

[donysukardi]

Currently the redirection happens after invalidation. Suppose we can't change the order, the instance of query still on the page will try to refetch new data.

My use case is to have reusable mutation hooks that automatically revalidate relevant queries.

export function useCreateEntryMutation(options) {
  const queryClient = useQueryClient();
  return useMutation(
    async (params) => {
      const { data } = await createEntry(params);
      return data!;
    },
    {
      ...options,
      onSuccess: (...args) => {
        queryClient.invalidateQueries('entries');
        options?.onSuccess?.(...args);
      },
    }
  );
}

My typical usage would be something like,

const createEntryMutation = useCreateEntryMutation();

try {
  // Refetch will happen after this  
  await createEntryMutation.mutateAsync();
  doRedirect();
} catch {}

I suppose I can change the order of execution and then pass onSuccess instead. But I want to avoid that to maintain colocation for event handling.

onSuccess: (...args) => {
  options?.onSuccess?.(...args); 
  queryClient.invalidateQueries('entries');
},

const createEntryMutation = useCreateEntryMutation({
  onSuccess: () => {
    doRedirect(); // This is no colocated with handleSubmit anymore
  }
});

[TkDodo]

I think you are looking for:

queryClient.invalidateQueries('entries', { refetchActive: false })

from the docs:

refetchActive: Boolean
Defaults to true
When set to false, queries that match the refetch predicate and are actively being rendered via useQuery and friends will NOT be refetched in the background, and only marked as invalid.

[donysukardi]

Nice. That's exactly what I'm looking for. Though, I'm starting to think if query invalidations are better left to the individual implementations instead of done in the custom hook, as the custom hook doesn't have enough knowledge of whether there are any queries on the page that require active refetch

[donysukardi]

Okay. I've added support for custom filters to the hook. This allows user to override it if necessary. Thanks @TkDodo for your help!

export function useCreateEntryMutation(
  options,
  invalidateQueriesFilters // Allow custom filters
) {
  const queryClient = useQueryClient();
  return useMutation(
    async (params) => {
      const { data } = await createEntry(params);
      return data!;
    },
    {
      ...options,
      onSuccess: (...args) => {
        queryClient.invalidateQueries('entries', invalidateQueriesFilters);
        options?.onSuccess?.(...args);
      },
    }
  );
}