inland-turquoise

useQuery refetch

Hello everyone, I have a react native with typescript using zustand and react-query latest version. I have a question that I have zustand store to keep my filters object, if it changes, I want to make the useQuery to get the latest data with the filters. Here's the code: zustand store:

const usePlansStore = create<Timeline>((set, get) => ({
  filters: {
    date_range: "this_year",
  },

  getFilters: () => {
    const state = get();
    return state.filters;
  },

  setFilters: (field: string, value: string | null) => {
    set((state) => ({
      filters: {
        ...state.filters,
        [field]: value,
      },
    }));
  },
}));

const usePlansStore = create<Timeline>((set, get) => ({
  filters: {
    date_range: "this_year",
  },

  getFilters: () => {
    const state = get();
    return state.filters;
  },

  setFilters: (field: string, value: string | null) => {
    set((state) => ({
      filters: {
        ...state.filters,
        [field]: value,
      },
    }));
  },
}));

Get plans with filters component

...
  const plansStore = usePlansStore();

  const {
    data,
    refetch: refetchPlans,
    isLoading: isGetPlansLoading,
  } = useGetPlans(plansStore.getFilters());
....

...
  const plansStore = usePlansStore();

  const {
    data,
    refetch: refetchPlans,
    isLoading: isGetPlansLoading,
  } = useGetPlans(plansStore.getFilters());
....

useGetPlans function

export const useGetPlans = (
  filters: PlanFilter
): UseQueryResult<ApiPlanWithPlaces[], unknown> => {
  return useQuery(["plans"], () => getPlans(filters), {
    staleTime: StaleTimeConfigs.TWO_MINUTES,
  });
};

export const useGetPlans = (
  filters: PlanFilter
): UseQueryResult<ApiPlanWithPlaces[], unknown> => {
  return useQuery(["plans"], () => getPlans(filters), {
    staleTime: StaleTimeConfigs.TWO_MINUTES,
  });
};

I can think of a solution which is to call refetch() function, or invalidate the query when the filters object changes. But not sure if which one is the better one or a correct way of doing it Thank you for your help ❤️

5 Replies

deep-jade•3y ago

Put the filters into the query key and it will fetch automatically

inland-turquoiseOP•3y ago

@TkDodo 🔮 Thank you for your help, while you're here, I have another question for query key, and how it properly use it 🙂 I have the useGetPlans and useGetTodayPlans, these two are calling the same api but it has different filters, and in different screen pages. So I use 2 different query keys for it for the caching stuff, do you think that's correct. Another question is how can I include the filters to the query key? Something like this? useQuery(["plans", "withFilters" filters], () => getPlans(filters)...

export const useGetPlans = (
  filters: PlanFilter
): UseQueryResult<ApiPlanWithPlaces[], unknown> => {
  return useQuery(["plans"], () => getPlans(filters), {
    staleTime: StaleTimeConfigs.TWO_MINUTES,
  });
};

export const useGetTodayPlans = (
  filters: PlanFilter
): UseQueryResult<ApiPlanWithPlaces[], unknown> => {
  return useQuery(["today_plans"], () => getPlans(filters), {
    staleTime: StaleTimeConfigs.FIVE_MINUTES,
  });
};

export const useGetPlan = (
  key: UUID | undefined
): UseQueryResult<ApiPlanWithPlaces, unknown> => {
  return useQuery(["plans", key], () => getPlan(key), {
    enabled: !!key,
    staleTime: StaleTimeConfigs.TWO_MINUTES,
  });
};

export const useGetPlans = (
  filters: PlanFilter
): UseQueryResult<ApiPlanWithPlaces[], unknown> => {
  return useQuery(["plans"], () => getPlans(filters), {
    staleTime: StaleTimeConfigs.TWO_MINUTES,
  });
};

export const useGetTodayPlans = (
  filters: PlanFilter
): UseQueryResult<ApiPlanWithPlaces[], unknown> => {
  return useQuery(["today_plans"], () => getPlans(filters), {
    staleTime: StaleTimeConfigs.FIVE_MINUTES,
  });
};

export const useGetPlan = (
  key: UUID | undefined
): UseQueryResult<ApiPlanWithPlaces, unknown> => {
  return useQuery(["plans", key], () => getPlan(key), {
    enabled: !!key,
    staleTime: StaleTimeConfigs.TWO_MINUTES,
  });
};

deep-jade•3y ago

keys are always derived from whatever you use inside the queryFn. so if you have:

queryFn: () => getPlans(filters)

queryFn: () => getPlans(filters)

then the key must be:

['something', filters]

['something', filters]

we have an eslint plugin that checks for this, you should be using it

inland-turquoiseOP•3y ago

Oh, yes please, can I ask the name for it?

deep-jade•3y ago

https://tanstack.com/query/v4/docs/react/eslint/eslint-plugin-query

ESLint Plugin Query | TanStack Query Docs

TanStack Query comes with its own ESLint plugin. This plugin is used to enforce best practices and to help you avoid common mistakes. Installation

Gaming

Programming

useQuery refetch

Did you find this page helpful?