Dynamically choose query variables in React Apollo

Question

I'd like to be able to dynamically choose which query variables I use in GraphQL.

For example, it seems a little redundant to need three separate queries:

const getAllStops = gql`
  query trafficStops {
    trafficStops {
      id
      date
    }
  }
`

const getStopsAfter = gql`
  query trafficStops($after: String!) {
    trafficStops(after: $after) {
      id
      date
    }
  }
`
const getStopsBefore = gql`
  query trafficStops($before: String!) {
    trafficStops(before: $before) {
      id
      date
    }
  }
`

Is there a way in which I could pass not just the variables before or after but whether I'd like to use one, the other, neither, or both into a single query instead of having multiple queries?

Vitor · Accepted Answer · 2019-04-07 03:17:14Z

2

Yes, you just have to make your arguments optional. The exclamation mark at String! requires the argument to be a string and not null. Hence, by removing it you could write your single query as

const getAllStops = gql`
  query trafficStops($after: String, $before: String)  {
    trafficStops(after: $after, before: $before) {
      id
      date
    }
  }
`

answered Apr 7, 2019 at 3:17

Vitor

462 bronze badges

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

1 Comment

crash springfield Over a year ago

You know, I'd had it set up this way on the server and it didn't even occur to me to do it on the frontend. Thanks!

Collectives™ on Stack Overflow

Dynamically choose query variables in React Apollo

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related