optimistic-gold

Refetch all data vs filtered data

I have a click action that filters my list of ingredients like this:

queryClient.setQueryData(
        ['CCCIngredients', selectedCostCenter?.value],
        (oldData: Ingredient[] | undefined) => {
            return (
                oldData?.filter((i) =>
                    allowedIngredients.some(...

queryClient.setQueryData(
        ['CCCIngredients', selectedCostCenter?.value],
        (oldData: Ingredient[] | undefined) => {
            return (
                oldData?.filter((i) =>
                    allowedIngredients.some(...

Now, I want to reverse that action on a different click action. So I want to go get all the ingredients again. I tried doing this:

queryClient.setQueryData(
    ['CCCIngredients', selectedCostCenter?.value],
    (oldData: Ingredient[] | undefined) => {
        console.log({oldData});
        return oldData
    });

queryClient.setQueryData(
    ['CCCIngredients', selectedCostCenter?.value],
    (oldData: Ingredient[] | undefined) => {
        console.log({oldData});
        return oldData
    });

But this just gets the same filtered data.

5 Replies

optimistic-goldOP•15mo ago

OK, so I figured out this does work: await queryClient.invalidateQueries({queryKey: ['CCCIngredients', selectedCostCenter?.value]}); Is that the wrong way to do things or is that acceptable?

rival-black•15mo ago

I wouldn't update the cache I would just use select

optimistic-goldOP•15mo ago

So are you saying change my select data in each of the two scenarios?

rival-black•15mo ago

I'm not sure I understand what you're asking. Using select from useQuery allows you to filter/transform/etc the data in the cache so you can filter the data without destroying the cache and forcing a refetch.

const { data } = useQuery({
  queryKey: [...],
  queryFn: () => { ... },
  select: data => data?.filter((i) =>
                    allowedIngredients.some(...
})

const { data } = useQuery({
  queryKey: [...],
  queryFn: () => { ... },
  select: data => data?.filter((i) =>
                    allowedIngredients.some(...
})

optimistic-goldOP•15mo ago

oh that makes sense and as allowedIngredients gets updated, that list will update

Gaming

Programming

Refetch all data vs filtered data

Did you find this page helpful?