Help with no stale/inactive data, on refetch (breaks the site)

hey everyone, I've been a huge fan of react-query, and read many of tkdodo's blogs (huge inspiration). I was trying to implement the same for a production nextjs search application, but I faced an error. I hope this is a good place to discuss

The problem is when I run a fetch, and try changing my facets (filters) to search again, react-query does the fetch and stores it, and if changed it turns

inactive

inactive

but if I go back to the same query combination within the stale time, it doesn't fetch and the website. has no content to show.

so I have 2 queries running, one for facets and the other for the main search paginated query, both are interdependent so i have two different queries, one with the tag

pagination

pagination

other with

facet

facet

with all variable deps.

my query factories are

 export const paginationQueryFactory = {
  pagination: (params: SearchParamProps) =>
    [
      'pagination',
      ...params
    ] as const,
  searchForFacets: (q: string) => ['searchForFacets', q] as const,
  facets: (...facets: Array<string[] | undefined>) =>
    ['facets', facets] as const,
};


const usePaginatedQuery = ({
  searchParams,
}: {
  searchParams: SearchParamProps;
}) => {
  const queryWithFilters = useQuery({
    queryKey: paginationQueryFactory.pagination(searchParams),
    queryFn: async () =>
      fetchSearchData(
        //fetcher
      ),
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
  });
  return { queryWithFilters };
};

 export const paginationQueryFactory = {
  pagination: (params: SearchParamProps) =>
    [
      'pagination',
      ...params
    ] as const,
  searchForFacets: (q: string) => ['searchForFacets', q] as const,
  facets: (...facets: Array<string[] | undefined>) =>
    ['facets', facets] as const,
};


const usePaginatedQuery = ({
  searchParams,
}: {
  searchParams: SearchParamProps;
}) => {
  const queryWithFilters = useQuery({
    queryKey: paginationQueryFactory.pagination(searchParams),
    queryFn: async () =>
      fetchSearchData(
        //fetcher
      ),
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
  });
  return { queryWithFilters };
};

const useFacets = ({ searchParams }: { searchParams: SearchParamProps }) => {
  const facets = [
    ...searchParams
  ];

  const facetQuery = useQuery({
    queryKey: QueryKeyFactory.facets(...facets),
    queryFn: () => fetchFacets(searchParams),
    refetchOnWindowFocus: false,
  });

  return facetQuery;
};

const useFacets = ({ searchParams }: { searchParams: SearchParamProps }) => {
  const facets = [
    ...searchParams
  ];

  const facetQuery = useQuery({
    queryKey: QueryKeyFactory.facets(...facets),
    queryFn: () => fetchFacets(searchParams),
    refetchOnWindowFocus: false,
  });

  return facetQuery;
};

and then passing things through via a wrapper

TanStack•2y ago•

10 replies

blank-red

Help with no stale/inactive data, on refetch (breaks the site)

inactive

inactive

pagination

pagination

other with

facet

facet

with all variable deps.

my query factories are

 export const paginationQueryFactory = {
  pagination: (params: SearchParamProps) =>
    [
      'pagination',
      ...params
    ] as const,
  searchForFacets: (q: string) => ['searchForFacets', q] as const,
  facets: (...facets: Array<string[] | undefined>) =>
    ['facets', facets] as const,
};


const usePaginatedQuery = ({
  searchParams,
}: {
  searchParams: SearchParamProps;
}) => {
  const queryWithFilters = useQuery({
    queryKey: paginationQueryFactory.pagination(searchParams),
    queryFn: async () =>
      fetchSearchData(
        //fetcher
      ),
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
  });
  return { queryWithFilters };
};

 export const paginationQueryFactory = {
  pagination: (params: SearchParamProps) =>
    [
      'pagination',
      ...params
    ] as const,
  searchForFacets: (q: string) => ['searchForFacets', q] as const,
  facets: (...facets: Array<string[] | undefined>) =>
    ['facets', facets] as const,
};


const usePaginatedQuery = ({
  searchParams,
}: {
  searchParams: SearchParamProps;
}) => {
  const queryWithFilters = useQuery({
    queryKey: paginationQueryFactory.pagination(searchParams),
    queryFn: async () =>
      fetchSearchData(
        //fetcher
      ),
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
  });
  return { queryWithFilters };
};

const useFacets = ({ searchParams }: { searchParams: SearchParamProps }) => {
  const facets = [
    ...searchParams
  ];

  const facetQuery = useQuery({
    queryKey: QueryKeyFactory.facets(...facets),
    queryFn: () => fetchFacets(searchParams),
    refetchOnWindowFocus: false,
  });

  return facetQuery;
};

const useFacets = ({ searchParams }: { searchParams: SearchParamProps }) => {
  const facets = [
    ...searchParams
  ];

  const facetQuery = useQuery({
    queryKey: QueryKeyFactory.facets(...facets),
    queryFn: () => fetchFacets(searchParams),
    refetchOnWindowFocus: false,
  });

  return facetQuery;
};

and then passing things through via a wrapper

Help with no stale/inactive data, on refetch (breaks the site)

Similar Threads

Help with no stale/inactive data, on refetch (breaks the site)

Similar Threads

Similar Threads

Similar Threads