TanStack•3y ago•

71 replies

nursing-lime

Component not re-rendering on removeQueries()

I have a

FlatList

FlatList

with items. Lets call them

FlatListItem

FlatListItem

.

I am using

memo

memo

to memoize my Items to prevent them to re-render when the parent changes using

export default memo(FlatListItem);

export default memo(FlatListItem);

For each

FlatListItem

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
    });
};

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

FlatListItem

I will then use

useGetDataQuery

useGetDataQuery

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

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

When the

FlatListItem

FlatListItem

is loaded for the first time it all works as expected.
Using

!isSuccess

!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

FlatListItem

. Again, with a loading indicator and when loaded the data should be shown.

I tried to accomplish this by using

removeQueries

removeQueries

queryClient.removeQueries({
    queryKey: ["my_key"],
});

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

FlatListItem

TanStack•3y ago•

71 replies

nursing-lime

Component not re-rendering on removeQueries()

I have a

FlatList

FlatList

with items. Lets call them

FlatListItem

FlatListItem

.

I am using

memo

memo

to memoize my Items to prevent them to re-render when the parent changes using

export default memo(FlatListItem);

export default memo(FlatListItem);

For each

FlatListItem

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
    });
};

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

FlatListItem

I will then use

useGetDataQuery

useGetDataQuery

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

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

When the

FlatListItem

FlatListItem

is loaded for the first time it all works as expected.
Using

!isSuccess

!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

FlatListItem

. Again, with a loading indicator and when loaded the data should be shown.

I tried to accomplish this by using

removeQueries

removeQueries

queryClient.removeQueries({
    queryKey: ["my_key"],
});

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

FlatListItem

Component not re-rendering on removeQueries()

Similar Threads

Component not re-rendering on removeQueries()

Similar Threads

Similar Threads

Similar Threads