Allow refetch() in useQuery to Accept Query Parameters

[dimassibassem]

Currently, refetch() from useQuery only re-executes the query with the same parameters (query key and options) provided during initialization. There is no built-in way to pass different parameters directly to refetch() without changing the query key or using queryClient.fetchQuery().

Problem Statement:

When using useQuery with dynamic parameters, developers often want to trigger refetch() with different parameters on demand. However, the current behavior requires either:

1. Managing parameters via state and changing the query key.

2. Using queryClient.fetchQuery() separately.

It would be more intuitive and convenient if refetch() could directly accept new parameters without needing to modify the query key or use an entirely different query

Proposed Solution:

Enable refetch() to accept query parameters and merge them with the current query key.

Why This Feature Matters:

Developer Experience: Simplifies triggering queries with different parameters without additional boilerplate.

Efficiency: Reduces the need for state management workarounds.

---

Environment:

React Query Version: latest

React Version: 18

[TkDodo]

https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch

[TkDodo]

what is forceRefresh achieving in fetchUsers ?

[dimassibassem]

forceRefresh is a query parameter sent to the backend to indicate that the server should bypass its internal cache and return fresh data. This is useful for scenarios like pull-to-refresh, where we explicitly want the latest data regardless of any backend caching mechanisms.

[dimassibassem]

This solution fixes my problem by passing arguments to the refetch function. The customRefetch function allows dynamic refetching with the option to pass new QueryPayload arguments while maintaining the existing ones if none are provided.

export function useGetTransactions(
  args?: QueryPayload<GetTransactionsPayload, AccountTransaction[]>,
) {
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: [ACCOUNTS_QUERIES_PREFIX, GET_TRANSACTIONS, args?.payload],
    queryFn: () => getAccountsServiceInstance().getTransactions(args?.payload),
    ...args?.queryOptions,
  });

  const customRefetch = async (
    refetchArgs?: QueryPayload<GetTransactionsPayload, AccountTransaction[]>,
  ) => {
    return queryClient.fetchQuery({
      queryKey: [ACCOUNTS_QUERIES_PREFIX, GET_TRANSACTIONS, args?.payload],
      queryFn: () =>
        getAccountsServiceInstance().getTransactions(
          refetchArgs?.payload || args?.payload,
        ),
      staleTime: 0,
    });
  };
  return {...query, refetch: customRefetch};
}

Do you have any suggestions or ideas for improving this approach? I'd love to hear any thoughts!

[TkDodo]

usually, everything that is used inside the queryFn should be part of the queryKey. it sounds like forceRefresh is an exception because you don’t actually want to store the result in a different key?

passing a different queryFn is always dangerous because the queryFn gets stored on the query and automatic refetches might re-use those, so I would keep the same function.

I would probably create a ref and pass that through meta:

const forceRefresh = useRef(false)

const { refetch } = useQuery({
  queryKey,
  queryFn: ({ meta }) => fetchUsers({ forceRefresh: meta.forceRefresh.current }),
  meta: {
    forceRefresh
  }
})

const handleRefresh = () => {
  forceRefresh.current = true
  refetch();
};

[dimassibassem]

That sounds like a better solution to my problem! 🎯 I appreciate the clarification on queryFn and queryKey, and the explanation about using meta with a ref.
This approach makes a lot of sense and helps avoid unnecessary key changes.
Thanks again! 🚀