如何在react-apollo中强制更新数据缓存？

Question

当您重新访问其数据由react-apollo提供支持的页面时，如何使用refetch刷新数据

比方说，我第一次访问列表页面。默认情况下，apollo将获取查询并对其进行缓存。因此，当您在会话期间再次访问同一页面时，它将填充其缓存存储中的数据。如何强制apollo在每次挂载组件时都重新获取数据？

Answer 1

你可以使用apollo的fetchPolicy，基于此，它将决定是否再次执行查询。

示例：

const graphQLOptions = {
  name: 'g_schemas',
  options: (props) => {
    return {
      variables: {
        name: props.name,
      },
      fetchPolicy: 'cache-and-network',
    }
  },
}

希望能有所帮助。

Answer 2

补充一下Pranesh的答案:您要查找的fetchPolicy是network-only。

Answer 3

如果您使用的是react-apollo的查询组件，例如：

import { Query } from "react-apollo";

你可以通过它的道具来应用fetchPolicy。下面是一个例子：

import gql from 'graphql-tag';
import React from 'react';
import { Query } from 'react-apollo';

const CounterView = ({ counter }) => (
  <div>{counter}</div>
);

const GET_COUNTER = gql`
  {
    counter
  }
`;

const Counter = () => (
  <Query query={GET_COUNTER} fetchPolicy={'network-only'}>
    {({ data }) => {
      return <CounterView {...data} />;
    }}
  </Query>
);

export default Counter;

参考文献：

• https://www.apollographql.com/docs/react/essentials/queries.html#basic
• https://www.apollographql.com/docs/react/essentials/queries.html#props
• https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-config-options-fetchPolicy