TanStackT
TanStack•2y ago•
6 replies
faint-white

Invalid sorting

Hi, I'm using infinite query with graphql with pagination, filtering and sorting. I have two similar endpoints where one returns all visit data and other only for specific operator.
Issue i'm having is that for operator it appears that sorting is messed up somewhere during useInfiniteQuery process. When sorting rule is changed then only first and last elements are switched.

Exact same code only with query string changed works properly for all visit data, and query created by this works when used within postman etc. This seems like a caching bug?
const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: ['operatorVisits', { first: 6, after: null, sort, search }],
    queryFn: ({ pageParam, queryKey }) => {
      const [_key, { sort }] = queryKey;
      return graphQLClient.request(operatorVisitsQuery, {
        first: 6,
        after: pageParam,
        before: null,
        last: null,
        order: [
          {
            visit: {
              visitDate:
                sort == 'date-ASC'
                  ? SortEnumType.Asc
                  : sort == 'date-DESC'
                    ? SortEnumType.Desc
                    : SortEnumType.Desc,
              status:
                sort == 'status'
                  ? {
                      description: SortEnumType.Asc,
                    }
                  : undefined,
            },
          },
        ],
      });
    },
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage, pages) => {
      return lastPage?.myVisits?.pageInfo?.endCursor!;
    },
  });
Was this page helpful?