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

Question

我们正在使用 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 吗？

谢谢！

Answer 1

所以你有两种可能性：

1, Define some random input to your query, and pass it in. like this:

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, Export as a container and acces the result as a props:

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));

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

Apollo refetching when using with React

apollo

reactjs

graphql

react-apollo