CODEWITHSUNDEEP
graphqlreact-apollo
crash springfield
crash springfield

Reputation: 1082

Dynamically choose query variables in React Apollo

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?

Upvotes: 0

Views: 467

Answers (1)

Vitor
Vitor

Reputation: 46

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
    }
  }
`

Upvotes: 2

Related Questions