Refetch from different component without props

apollo
1

Is possible to refetch from a different component without the prop element ?

Example…

  • PetsContainer->
  • DogsComponent (query dogs)
  • CatsComponent (query cats)

i want to refetch from Cats-> query dogs

is this possible ?

Thanks!

2

Are you using Redux in your app? in that case, you can dispatch an action from your CatsComponent that can update the variables in DogsComponent.

Otherwise, you should have PetsContainer pass down a refetch method into CatsComponent, and when that’s called it can call refetch in DogsComponent. Perhaps like this:

class PetsContainer {
  constructor() {
    super();
    this.refetchDogs = this.refetchDogs.bind(this);
  }
  
  refetchDogs() {
    this.refs.dogs.props.data.refetch();
  }

  render() {
    return (
      <div>
        <DogsComponent ref="dogs" />
        <CatsComponent onRefetchDogs={this.refetchDogs} />
      </div>
    )
  }
}

Let me know if that works, I haven’t tried it.

Another alternative is to simply have all of the queries live on PetsContainer, then you can avoid doing this kind of communication up and down the component tree.

1 Like
3

I couldnt make it work, so i decided to move the fetchs to PetsContainer

i send to CatsComponent the refetch() the same way you explained.

It works like that!. Thanks.

1 Like