docs icon indicating copy to clipboard operation
docs copied to clipboard

[Feedback]Add more detailed example how to fetch paginated data

Open funes79 opened this issue 1 year ago • 0 comments

Page: /lib/graphqlapi/query-data/q/platform/[platform]

Feedback:

Many developers would love to see an example how to implement more complex reading when data is paginated. How to execute fetch all on nested attributes.

For example Users vs Posts. Relation 1 to many. Lets say we have 100's of users and each user can have 100's of posts.

The custom query can look like this:

export const listUsersWithPosts= /* GraphQL */ `
  query ListUsersWithPosts(
    $id: String
    $filter: ModelBlaBla
    $limit: Int
    $nextToken: String
    $sortDirection: ModelSortDirection
  ) {
    listUsers(
      id: $id
      filter: $filter
      limit: $limit
      nextToken: $nextToken // <- 1st next Token, top level
      sortDirection: $sortDirection
    ) {
      items {
        id
        posts{
          items {
            id
            title
          }
          nextToken // <- 2nd nextToken, the nested one for the nested object
        }
        name
        email
      }
      nextToken
    }
  }
`;

Having a function like this only fetches all the top level items - in this case it iterates until it gets all the users. But what about the nested items? It could be that some users have so many posts that the 2nd level nextToken is not empty.

export async function fetchAllItems(API, query, variables) {
  const items = [];
  let nextToken = null;

  do {
    const response = await API.graphql({
      query,
      variables: {
        ...variables,
        nextToken, // Pass the next token as a variable
      },
    });

    const { items: newItems, nextToken: newNextToken } =
      response.data[Object.keys(response.data)[0]];
    items.push(...newItems);
    nextToken = newNextToken;
  } while (nextToken);

  return items;
}
const allData = await fetchAllItems(API, listUsersWithPosts, {});

funes79 avatar Aug 09 '23 07:08 funes79