React Relay paginate on a query instead of a fragment

Viewed 106

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

1 Answers

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

Related