How to refresh Query/Cache from an Apollo Subscription component in React

Question

Imagine an component hierarchy like so:

<Team>
  <Leaderboard />
  <PlayerStats />
</Team>

In the render method of Leaderboard, we have an Apollo/GraphQL Query component fetching the top players.

We also have an component that triggers upon getting a new PlayerStat (currently in PlayerStats -- but happy to put it anywhere).

How do I get the Leaderboard query to refetchQueries/clear cache upon a trigger from the PlayerStat Subscription component.

Thanks!!

Rishichandra Wawhal · Accepted Answer · 2018-08-16 10:20:29Z

2

So the Apollo Query component provides a refetch function with React context, just like data, loading and error.

<Query query={...} >
  {
    ({ data, loading, error, refetch}) => {
      if (!this.state.refetch) {
        this.setState({ refetch });
      }
      return <RenderData data={data} />;
    }
  }
</Query>

You can set this refetch function in the state and call it whenever the component receives an event.

edited Aug 16, 2018 at 10:20

answered Aug 15, 2018 at 15:57

Rishichandra Wawhal

5174 silver badges11 bronze badges

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

2 Comments

Jonathan Over a year ago

sorry -- still new to React, but is it good practice to setState in a render()

Rishichandra Wawhal Over a year ago

@Jonathan sorry my bad. I edited the answer. You can do a conditional setState so that it does not go into a loop. As you said, setState is not recommended to be used inside render. But I can't see any other way of modifying a sibling component other than that.

Collectives™ on Stack Overflow

How to refresh Query/Cache from an Apollo Subscription component in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related