Caching 如何使用Apollo 3（useQuery，fetchMore）对列表进行分页并正确缓存

我有一个问题，关于阿波罗3号的列表分页，以及缓存的良好管理

以下是我的组件：

export default function GatekeeperManagement() {
  const classes = useStyles();
  // filters
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(1);
  const [list, setList] = useState(null);

  const [search, setSearch] = useState(null);
  const {
    data,
    fetchMore,
  } = useQuery(LIST_VISITOR_REQUESTS, {
    variables: {
      cursor: { first: rowsPerPage, offset: 0 },
      search,
    },
    fetchPolicy: 'cache-and-network',
    onCompleted: (d) => list ? null : setList(d),
  });

  const handleFetchMore = (selectedPage) => {
    fetchMore({
      variables: {
        cursor: { first: rowsPerPage, offset: selectedPage * rowsPerPage },
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        setList(fetchMoreResult);
        return fetchMoreResult;
      },
    });
  };

  const handlePageSize = () => {
    if (!data) return 0;
    return data.getCampus.listVisitors.meta.total;
  };

  const handleChangePage = async (event, newPage) => {
    setPage(newPage);
    handleFetchMore(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

和我的缓存：

  const cache = new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          list: {
            keyArgs: ['cursor'],
            merge(existing, incoming, { args }) {
              const merged = existing ? existing.slice(0) : [];
              // Insert the incoming elements in the right places, according to args.
              const end = args.cursor.offset + Math.min(args.cursor.first, incoming.length);
              for (let i = args.offset; i < end; i += 1) {
                merged[i] = incoming[i - args.cursor.offset];
              }
              return merged;
            },
            read(existing, { args }) {
              // If we read the field before any data has been written to the
              // cache, this function will return undefined, which correctly
              // indicates that the field is missing.
              const page = existing && existing.slice(
                args.cursor.offset,
                args.cursor.offset + args.cursor.first,
              );
              // If we ask for a page outside the bounds of the existing array,
              // page.length will be 0, and we should return undefined instead of
              // the empty array.
              if (page && page.length > 0) {
                return page;
              }
              return [];
            },
          },
        },
      },
    },
  });

const cache=new InMemoryCache({
类型策略：{
查询：{
字段：{
名单：{
keyArgs:['cursor']，
合并（现有、传入、{args}）{
const merged=existing？existing.slice（0）：[]；
//根据args，在正确的位置插入传入元素。
const end=args.cursor.offset+Math.min（args.cursor.first，incoming.length）；
对于（设i=args.offset；i0）{
返回页面；
}
返回[]；
},
},
},
},
},
});

我如何知道我的数据是从缓存还是从后台读取的？ 当我更改页面时，我总是发送两个请求：一个是我的useQuery，另一个是我的fetchMore。阻止useQuery并只使用fetchMore的方法？或者这是一个出价的主意

我被这句话迷住了：）