Apollo refetching when using with React

Question

We're developing our complete first app with Apollo and we are having an issue when using it with react-router.

We are using the new component and the problem is when we change the route of the app it uses the data originally was fetched (even if the data changed on the server):

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

I've seen this: https://www.apollographql.com/docs/react/essentials/queries.html#refetching

Do we have to use refetch on componentDidMount?

thanks!

peter · Accepted Answer · 2018-10-12 07:46:13Z

1

So You have 2 possibilities:

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

edited Oct 12, 2018 at 7:46

answered Oct 11, 2018 at 10:36

peter

3551 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Apollo refetching when using with React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related