How to pass variables to a GraphQL query?

Question

Lets assume I have the following GraphQL query in React-Apollo

const CurrentUserForLayout = gql`
  query CurrentUserForLayout($avatarID: Int!) {
    currentUser          


        

Answer 1

Your ProfileWithData component does a good job of rendering the avatar of a certain user. It's not the responsiblity of this component to manage changes of the currently displayed avatar component.

One way is to add a new prop avatarId that gets passed down from the parent component. Then you would need to write this:

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.avatarId
    }
  })
})(Profile);

If you are familiar with react-router, another approach would be to use the route parameters to determine the avatar id. You would need to adjust the call of graphql like this:

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.params.avatarId
    }
  })
})(Profile);

To read more about the usage of query variables like this, you can check the React Track of Learn Apollo.