与 React 一起使用时 Apollo 重新获取答案

【问题标题】：Apollo refetching when using with React与 React 一起使用时 Apollo 重新获取
【发布时间】：2019-03-14 03:36:58
【问题描述】：

我们正在使用 Apollo 开发我们完整的第一个应用程序，但在使用 react-router 时遇到了问题。

我们正在使用新组件，问题是当我们更改应用程序的路由时，它使用了最初获取的数据（即使数据在服务器上发生了更改）：

import React from 'react';
import { Query } from 'react-apollo';

import { GET_FAVORITE_JOBS } from './graphql';
import FavoriteJobList from './stateless';

export default () => (
  <div>
    <Query query={GET_FAVORITE_JOBS}>
      {({ loading, error, data }) => (
        <FavoriteJobList loading={loading} error={error} data={data} />
      )}
    </Query>
  </div>
);

我看过这个：https://www.apollographql.com/docs/react/essentials/queries.html#refetching

我们必须在componentDidMount 上使用refetch 吗？

谢谢！

【问题讨论】：

标签： reactjs graphql apollo react-apollo

【解决方案1】：

所以你有两种可能性：

1，为您的查询定义一些随机输入，并将其传入。像这样：

export default () => (
  <div>
    <Query query={GET_FAVORITE_JOBS} variables={{ random: New Date().getTime() }}>
      {({ loading, error, data }) => (
        <FavoriteJobList loading={loading} error={error} data={data} />
      )}
    </Query>
  </div>
);

2、导出为容器并将结果作为道具访问：

import { graphql } from "react-apollo";

const SomeComp = (props) => (
  <div>
    // You can acces the results here as props. 
    // Also You can use props.refetch() as an action or component lifecycles
  </div>
);
export default graphql(GET_FAVORITE_JOBS, {
  name: "getFavJobs",
  options: (props)=> ({
    variables: {
      random: New Date().getTime()
    }
  })
})(SomeComp));

【讨论】：