T
TanStack•2y ago
unwilling-turquoise

useQueries isPending is always true

When using useQueries, I see that even if I set placeholderData isPending is always true when refetching with different params. What I'm trying to have is a Skeleton on first load, then a "loading indicator" when the user triggers another request because of a filter or something. If isPending and isLoading are always true, how can I check that the request is not happening for the first time with useQueries? I see a mention of placeholderData in the docs of useQueries explaining that it doesn't pass previous information but I'm not sure if this is the reason Here is how I use it: 
export const useGetCount = (results: Array<ResultsConfig>, q: string, filter: Record<string, any>) => {
  const searchparams = buildSearchParams(filter).toString();

  return useQueries({
    queries: results.map<UseQueryOptions<ResultsResponse, FetchError>>(({ endpoint }) => ({
      queryKey: ['count', endpoint, { query: q, filter }],
      queryFn: () => ...,
      placeholderData: keepPreviousData,
    })),
    combine: (query) => ({
      data: results.map((result, index) => {
        if (query[index].isError) {
          if (shouldUpsell(query[index].error?.code as number)) {
            return {
              ...result,
              count: query[index].error?.details?.count as number,
              isUpsell: true,
            };
          }

          return null;
        }

        return {
          ...result,
          count: query[index].data?.count as number,
        };
      }).filter(isNotNull),
      state: {
        isPending: query.some((q) => q.isPending),
        isLoading: query.some((q) => q.isLoading),
        isError: query.some((q) => q.isError),
        isSuccess: query.every((q) => q.isSuccess),
        isFetching: query.some((q) => q.isFetching),
      },
    }),
  });
};
export const useGetCount = (results: Array<ResultsConfig>, q: string, filter: Record<string, any>) => {
  const searchparams = buildSearchParams(filter).toString();

  return useQueries({
    queries: results.map<UseQueryOptions<ResultsResponse, FetchError>>(({ endpoint }) => ({
      queryKey: ['count', endpoint, { query: q, filter }],
      queryFn: () => ...,
      placeholderData: keepPreviousData,
    })),
    combine: (query) => ({
      data: results.map((result, index) => {
        if (query[index].isError) {
          if (shouldUpsell(query[index].error?.code as number)) {
            return {
              ...result,
              count: query[index].error?.details?.count as number,
              isUpsell: true,
            };
          }

          return null;
        }

        return {
          ...result,
          count: query[index].data?.count as number,
        };
      }).filter(isNotNull),
      state: {
        isPending: query.some((q) => q.isPending),
        isLoading: query.some((q) => q.isLoading),
        isError: query.some((q) => q.isError),
        isSuccess: query.every((q) => q.isSuccess),
        isFetching: query.some((q) => q.isFetching),
      },
    }),
  });
};
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?