Refetching when prop changes?

[leo-petrucci]

I'm having trouble figuring out how to make my useQuery refetch the data if a parameter passed to it changes.

I've created a custom hook that looks like this:

export const useTags = (
  searchString: string
): QueryObserverResult<TagInterface[], unknown> => {
  return useQuery('tags', async () => {
    const tags = await getTags(searchString);
    return tags;
  });
};

Essentially depending on the searchString, I would like my data to be updated.

I'm creating my hook like this:

  const { data, isFetching } = useTags(search);

And yet useQuery doesn't seem to update. Am I suppose to invalidate it manually to make it refetch?

Should I pass the query string to the key?

export const useTags = (
  searchString: string
): QueryObserverResult<TagInterface[], unknown> =>
  useQuery(['tags', searchString], async () => {
    const tags = await getTags(searchString);
    return tags;
  });

Kind of lost, let me know if you need any more info.

[TkDodo]

Should I pass the query string to the key?

yes. Every time the key changes, react-query will refetch. It’s kinda like a dependency array to a useEffect.

[leo-petrucci]

Thank you for the help 👍