Search code examples
graphqlapollorelayjsrelay

React Relay paginate on a query instead of a fragment


I have been looking for a way to paginate on a standard relay graphql query, rather than creating a fragment and paginating on that. I havent really been able to find any documentation on how to achieve such a thing. I just want to run the query, come up with the first n records, and then run the query again (although i read thats not necessarily best practice, and then load the next 20 but increasing the count and running the query... has anyone done such a thing?

What I want in theory is...

  const = useLazyLoadQuery{
    data,
    loadNext,
    loadPrevious,
    hasNext,
    hasPrevious,
    isLoadingNext,
    isLoadingPrevious,
    refetch, // For refetching connection
  } = usePaginationFragment(
    graphql`
      fragment Table_user on User
      @refetchable(queryName: "UserQuery")
      @argumentDefinitions(
        count: { type: "Int", defaultValue: 20 }
        cursor: { type: "String" }
      ) {
      query UserQuery(
          $first: Int!,
          $after: String
    ) {
      users(search: $search) {
      id
      name
      phone
      email
      postalCode
      status
      referralCode
      products
      updatedAt
      nextAssignmentOn
    }
   }
  }

I'm sure theres a way to do this, but many attempts have failed


Solution

  • usePaginationFragment does not do any fetch

    you need to useLazyLoadQuery or usePreloadQuery to do the fetch

    useFragment, usePaginationFragment only declares data requirements for fragments

    check the new example here https://github.com/relayjs/relay-examples/pull/104