3

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!!

1 Answer 1

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.

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

2 Comments

sorry -- still new to React, but is it good practice to setState in a render()
@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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.