如何在 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;

参考文献：

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

How to force update data cache in react-apollo?

apollo

reactjs

graphql

react-apollo