Pagination with Query react-apollo & GraphQL

Retired Boards Appdev Graphql Basics And Troubleshooting
2

Alright, I re-worked the Query component and seem to have it working. Is there a better way to do this?

<Query query={GET_PRODUCTS}>
          {({ data, loading, error, fetchMore }) => {
            if (loading) return <div>loading products to memory...</div>;
            if (error) return <div>{error.message}</div>;
            if (data.products.pageInfo.hasNextPage) {
              fetchMore({
                variables: {
                  cursor:
                    data.products.edges[data.products.edges.length - 1].cursor
                },
                updateQuery: (previousResult, { fetchMoreResult }) => {
                  let combinedData = {
                    products: {
                      pageInfo: { ...fetchMoreResult.products.pageInfo },
                      edges: [
                        ...previousResult.products.edges,
                        ...fetchMoreResult.products.edges
                      ],
                      __typename: fetchMoreResult.products.__typename
                    }
                  };
                  return combinedData;
                }
              });
            }
            console.log("HERE", data);
            return <div>{JSON.stringify(data)}</div>;
          }}
        </Query>
1 Like