In my React and TypeScript app, I am trying to implement pagination (fetch more items) with Apollo Client version 3.3.19 and GraphQL.
I have the following GraphQL query provided from the server:
import { gql } from '@apollo/client';
export const GET_NODES = gql`
query GetNodes($limit: Int, $offset: Int) {
getNodes(abstractKey: limit: $limit, offset: $offset) {
pagination {
hasNextPage
totalItems
}
nodes {
id
title
}
}
}
`;
My React component:
/** @jsx jsx */
import { useCallback } from 'react';
import { useQuery } from '@apollo/client';
import { jsx } from '@emotion/react';
import { GET_NODES } from './MyBlock.gql';
import {
Props,
GqlRes,
NodesArgs,
} from './MyBlock.types';
const MyBlock = ({ data: blockData, metadata, offset, limit }: Props) => {
const { loading, data, fetchMore } = useQuery<
GqlRes,
NodesArgs
>(GET_NODES, {
variables: {
offset,
limit,
},
errorPolicy: 'all',
notifyOnNetworkStatusChange: true,
ssr: false,
});
const fetchNext = useCallback(() => {
return fetchMore({
variables: {
offset: data?.getNodes.nodes.length,
},
},
});
}, [nodes]);
const myItems =
data.getNodes.nodes.map((item) => {
return {
id: item.id,
title: item.title,
};
}) || [];
if (loading) {
return 'Loading...';
}
return myItems?.length ? (
<Carousel
items={myItems}
onReachEnd={() => {
if (nodes?.getNodes.pagination.hasNextPage) {
fetchNext();
}
}}
/>
) : null;
};
export default MyBlock;
Then in a file cache.ts
I have the typePolicies:
export const cacheOpts: InMemoryCacheConfig = {
possibleTypes,
typePolicies: {
Query: {
fields: {
nodes: offsetLimitPagination(),
},
},
},
};
Now when I test the carousel it renders the first 12 items. When I reach the last item and click the right-arrow button to fetch more results, the component re-renders and in the console I can see a new GraphQL request with the next chunk of items in the response. But in the frontend, in the ui it’s not visible? You can’t navigate further then the 12th item, so the array (prev and next) isn’t merged.
How do I use typePolicies and offsetLimitPagination with a nested array? In the docs they are working with a root field which is the array.
How do I get this to work?