Manual query with custum parameters

[levani]

I have a case where I want to run manual query when for example use clicks a button and pass some parameters to the query function. How can I do this with react-query?

Here is an example:

const { data, error, refetch } = useQuery(
	['getUserData', userID], // >>>>>> I don't know the value of userID yet
	runQuery,
	{
		manual: true,
		initialData: [],
	}
);

function onClick(userID) {
	refetch(); // >>>> How can I pass the userID here?
}

[kamranayub]

You would use useState and store the userID after clicking. A query key can return false to avoid sending out. In this case you won't need to set manual.

const [userID, setUserID] = useState(null)

// Avoid initiating query until `userID` is populated
const { data, error } = useQuery(
	!!userID && ['getUserData', userID],
	runQuery,
	{
		initialData: [],
	}
);

function onClick(userID) {
	setUserID(userID)
}

See https://github.com/tannerlinsley/react-query#dependent-queries

Cheers!

[Webbrother]

What if I need to make a request for the same userId with a payload of an object with ten props?

[levani]

What about using queryCache.prefetchQuery in this case? Would that be a correct usage of this function?

It seems I can just call queryCache.prefetchQuery from inside onClick method without using useQuery.

function onClick(userID) {
  const data = queryCache.prefetchQuery('getUserData', userID, runQuery);
  setUserData(data);
}

[kamranayub]

I think that's another option; I believe with the hook you'll get the benefit of garbage collection and instance tracking as well, though. Such as if the same query is refetched elsewhere in another component, this one will re-render. That may or may not be what you want but that'd be the difference I expect.

[levani]

Thanks! That was really helpful.