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

【问题标题】：How to force update data cache in react-apollo?如何在 react-apollo 中强制更新数据缓存？
【发布时间】：2017-10-03 09:57:05
【问题描述】：

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

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

【问题讨论】：

标签： reactjs graphql apollo react-apollo

【解决方案1】：

如果你使用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;

参考资料：

【讨论】：

【解决方案2】：

添加到 Pranesh 的答案：您正在寻找的 fetchPolicy 是 network-only。

【讨论】：

【解决方案3】：

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

例子：

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

希望对你有帮助。

【讨论】：