T
TanStack•8mo ago
deep-jade

setQueryData on a list with filters

Hey, i have a list with filters (meaning I can have a lot of different keys that contains a list), I would like to know if it's the recommended way to update a row without reloading the whole liste: 
    // my keys
    export const learningsKeys = {
      all: ['learnings'],
      lists: () => [...learningsKeys.all, 'list'] as const,
      list: (filters: GetLearningsParams) => [...learningsKeys.lists(), filters] as const,
    } as const;


    // my function
    const queries = queryClient.getQueryCache().findAll({
      queryKey: learningsKeys.lists(),
      exact: false,
    });
    queries.forEach((query) => {
      queryClient.setQueryData<LearningsApiReturn>(query.queryKey, (oldData) => {
        if (!oldData) return oldData;

        const newData = oldData._data.map((item) =>
          item.id === updatedLearning.id ? updatedLearning : item
        );

        return {
          ...oldData,
          _data: newData
        };
      });
    });
    // my keys
    export const learningsKeys = {
      all: ['learnings'],
      lists: () => [...learningsKeys.all, 'list'] as const,
      list: (filters: GetLearningsParams) => [...learningsKeys.lists(), filters] as const,
    } as const;


    // my function
    const queries = queryClient.getQueryCache().findAll({
      queryKey: learningsKeys.lists(),
      exact: false,
    });
    queries.forEach((query) => {
      queryClient.setQueryData<LearningsApiReturn>(query.queryKey, (oldData) => {
        if (!oldData) return oldData;

        const newData = oldData._data.map((item) =>
          item.id === updatedLearning.id ? updatedLearning : item
        );

        return {
          ...oldData,
          _data: newData
        };
      });
    });
As you can see I'm getting all queries and doing a forEach on them to update my row if it's in the cache
2 Replies
rare-sapphire
rare-sapphire•8mo ago
you can use setQueriesData, which accepts a query filter and then calls setQueryData for each found entry. It's pretty much what you are doing manually with findAll + setQueryData, just built-in and it batches updates
deep-jade
deep-jadeOP•8mo ago
nice thank you !

Did you find this page helpful?