resetting a pagination to refetch on default variables on pull to refresh throw cursor warning?

Question

i have this props on my flatlist:

 onRefresh={() => {
          setIsRefreshing(true);
          refetch(
            { categoriesCount: 4, categoriesCursor: '' },
            {
              fetchPolicy: 'network-only',
              onComplete: () => {
                setIsRefreshing(false);
              },
            }
          );
        }}

this is how i initialize pagination:

const { data, loadNext, isLoadingNext, hasNext, refetch } = usePaginationFragment<
    CategoriesPaginationQuery,
    Categories_viewer$key
  >(
    graphql`
      fragment Categories_viewer on Viewer
      @argumentDefinitions(
        categoriesCount: { type: "Int", defaultValue: 4 }
        categoriesCursor: { type: "String", defaultValue: "" }
      )
      @refetchable(queryName: "CategoriesPaginationQuery") {
        categories(first: $categoriesCount, after: $categoriesCursor)
          @connection(key: "Categories_viewer_categories", filters: []) {
          pageInfo {
            startCursor
            endCursor
            hasNextPage
            hasPreviousPage
          }
          edges {
            cursor
            node {
              id
              pk
              name
            }
          }
        }
      }
    `,
    viewer
  );

this is the warning:

Warning: Relay: Unexpected after cursor ``, edges must be fetched from the end of the list (YXJyYXljb25uZWN0aW9uOjc=).

you see on the argumentDefinitions the default value of categoriesCount is 4 and categoriesCursor is "" and i think relay thinks i am reusing variables that's already fetched but what i want to do is make the pagination "forget it's current edges" and go back like the beginning on pull to refresh?

Answer 1

To refetch a pagination container, use refetchConnection.