T
TanStack•17mo ago
sunny-green

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!;
    },
  });
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!;
    },
  });
3 Replies
sunny-green
sunny-greenOP•17mo ago
Also is it normal that this const [_key, { sort }] = queryKey returns type error about sort not existing on string?
deep-jade
deep-jade•17mo ago
no, not normal. show a typescript playground please also search is part of the queryKey, but you're not using it inside the queryFn as far as I can see ...
When sorting rule is changed then only first and last elements are switched.
please check with the network tab what gets returned for the api requests
sunny-green
sunny-greenOP•17mo ago
For unknown to me reason it started working properly now. Backend hasn't changed afaik. I stripped out the part that used search to make sure it worked not sure how to do that since i'm suing next and code-gen from graphql

Did you find this page helpful?