TanStackT
TanStack•3y ago•
71 replies
nursing-lime

Component not re-rendering on removeQueries()

I have a FlatList with items. Lets call them FlatListItem.

I am using memo to memoize my Items to prevent them to re-render when the parent changes using export default memo(FlatListItem);

For each FlatListItem in my list I have to fetch data. In a separate file I define a hook and a query function. Simplified they are looking like this:

const getData = async (id) => {
    let response = await axios.get(MY_URI+'/'+id);

    return response.data;
};

export const useGetDataQuery = (id) => {
    return useQuery({
        queryKey: ["my_key", id],
        queryFn: () => getData(id),
        staleTime: Infinity
    });
};


In my FlatListItem I will then use useGetDataQuery:

const { isSuccess, data } = useGetDataQuery(item.id);


When the FlatListItem is loaded for the first time it all works as expected.
Using !isSuccess I can show a loading indicator and when loading is done my data is shown.

Now in a different part of my application I want to invalidate the data and trigger a refetch in FlatListItem. Again, with a loading indicator and when loaded the data should be shown.

I tried to accomplish this by using removeQueries:
queryClient.removeQueries({
    queryKey: ["my_key"],
});


However this is not updating my component. The component will not re-render after the query cache is removed.

I am missing something? How can I properly trigger a re-render of my FlatListItem?
Was this page helpful?