React GraphQL Apollo - how to fetch multiple times at once

Question

I have a component which fetches data with one query with a parameter. I'd like to make this component call this query twice, with different parameters based on props (so maybe later even more-times). How can I achieve this? This is example of my code:

...
const getUser = gql`
  query getUser($last_name: String!, $first_name: String!) {
    user(last_name: $last_name, first_name: $first_name) {
      id
      last_name
      first_name
    }
  }
`
export default graphql(
  getUser, {
  options: (props)=>{
    return {
    variables: {
      last_name: ...something from props,
      first_name: ...something from props
    }
  }
}
})(ComponentClassName)

Usually I fetch the appropriate user based on the props. That's ok. But now, I'd like to use this component and be able to fetch more users, without changing backend and much frontend. At least I need to be able to define through props which users to fetch, and if one or more. How can I do this? Thanks.

score 0 · Answer 1 · answered May 11 '17 at 14:18

0

It sounds like you're using this component (let's call it User) as part of another one that has a list of users (let's call it UserList).

I see two solutions here:

If the UserList queries the list of users and gets their username which is later passed as a prop to each one of the User components and you can still use your getUser query. For performance reasons, and since you are using Apollo, it's probably a good idea to enable batching (https://dev-blog.apollodata.com/query-batching-in-apollo-63acfd859862), as you'll make one query per user.
You get all the data needed for each individual User in UserList and then pass it down as props. No queries would be made within each User component.

Hope that helps!

answered May 11 '17 at 14:18

Ricardo Portugal

319
1
5

This is what I would need which would completely solve my problem - is there any way to completely set the mutation from the component? Something like when I call Rest api from componentDidMount and I can write virtually anything there.. I'd need the same functionality for GraphQL as well (because I'm using dynamic GraphQL backend and users of my app can select which data they want to fetch) – user3696212 May 16 '17 at 10:43
You can call the mutation as follows, from the component itself: `this.props.mutate({ variables: { ... } }).then(({ data }) => { // do something if it succeeds }).catch(error => { // do something else if it fails });` There's more info about this in http://dev.apollodata.com/react/mutations.html . – Ricardo Portugal May 18 '17 at 14:12
Sorry, I meant rather query - custom query – user3696212 May 18 '17 at 18:19

score 0 · Answer 2 · answered May 15 '17 at 12:25

0

I think what you're looking for here is compose. With it, you could perform multiple graphql operations on one component. I implemented one here, which i composed both a query and a mutation.

You would be able to use it to compose two queries together, since they both have different props as mentioned.

answered May 15 '17 at 12:25

Ademola Adegbuyi

934
1
16
25

This is what I would need which would completely solve my problem - is there any way to completely set the mutation from the component? Something like when I call Rest api from componentDidMount and I can write virtually anything there.. I'd need the same functionality for GraphQL as well (because I'm using dynamic GraphQL backend and users of my app can select which data they want to fetch) – user3696212 May 16 '17 at 10:43

React GraphQL Apollo - how to fetch multiple times at once

2 Answers2