Apollo Pagination - Implied Design

[Rykuno]

I realized in the boilerplate pagination is obviously a large consideration, although with my prior knowledge of offset/cursor based pagination as mention in the Apollo docs, I'm missing how the NoQuarterTeam's recommended approach integrates into apollos recommended methods.

I notice there is a ConnectionResponse function with generic types within api. This one is obvious as it just is a generic of whatever obejct is being returned along with a count.

export function ConnectionResponse<TItem>(getNodesType: () => [ClassType<TItem>]) {
  @ObjectType({ isAbstract: true })
  abstract class ConnectionResponseClass {
    @Field(() => Int) count: number
    @Field(getNodesType) items: TItem[]
  }
  return ConnectionResponseClass
}

But where I'm confused is within web, there is a pagination function in which i have trouble understanding how it plays into the pagination strategy set forth. I'm currently using fetchMore from Apollo with offset-based pagination. Would anyone be able to explain how this function below plays a role in pagination or recommended use?

export function paginate<T>(key: string) {
  return (prev: Model<T>, { fetchMoreResult }: FetchResult<T>) => {
    if (!fetchMoreResult || !prev[key].items || !fetchMoreResult[key].items) return prev
    return Object.assign({}, prev, {
      [key]: {
        ...prev[key],
        count: fetchMoreResult[key].count,
        items: [...prev[key].items, ...fetchMoreResult[key].items],
      },
    })
  }
}

[JClackett]

Hey! Thanks for the question, pagination is something we are still working on since Apollo client updated their recommended approach. To be honest, I'm not a huge fan of their proposed way though i do see the benefits. We will eventually update our way of doing it. For now we are still using the updateQuery method in the fetchMore function.

The paginate function is a simple utility that appends the latest page of data to the end of the list, it accepts a key which is the name of the field in which count and items are returned. It works together with the skip and take arguments.

There is an example in this repo inside packages/web/src/pages/admin/users.tsx

Let me know if this makes sense!

[Rykuno]

Awesome explanation. Can't believe I missed that use case, yes it all makes sense now. I switched my pagination strategy over and it worked seamlessly with the ConnectionResponse!