Apollo分页和缓存加网络并发策略

Apollo提供了一种灵活的分页和缓存加网络并发策略，使得客户端可以自由控制分页和缓存的行为。具体方法如下：

1. 在前端定义查询：

const { useQuery } = require('@apollo/react-hooks'); const { gql } = require('apollo-boost');

const GET_PAGED_DATA = gql query getPagedData($pageSize: Int, $after: String) { data: getPagedData(pageSize: $pageSize, after: $after) @connection(key: "pagedData") { edges { cursor node { id name ... } } pageInfo { endCursor hasNextPage } } };

2. 在后端实现分页查询：

const PagedDataResolver = { getPagedData: async (parent, args, { dataSources }, info) => { const { pageSize, after } = args; const { data } = await dataSources.pagedDataAPI.getPagedData(pageSize, after); return data; }, };

3. 在前端组件中使用useQuery hook来获取分页数据：

const { loading, error, data, fetchMore, networkStatus } = useQuery(GET_PAGED_DATA, { variables: { pageSize: 10 }, notifyOnNetworkStatusChange: true, fetchPolicy: 'cache-and-network', })

4. 在组件内部添加分页控制逻辑：

const handleLoadMore = () => { fetchMore({ variables: { after: data.data.pageInfo.endCursor }, updateQuery: (prev, { fetchMoreResult }) => { if (!fetchMoreResult) return prev; return { data: { ...fetchMoreResult.data, edges: [...prev.data.edges, ...fetchMoreResult.data.edges], }, }; }, }); };

5. 使用Apollo的InMemoryCache来缓存分页数据：

import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http';

const cache = new