GraphQL dynamic query building

Matt Wilson picture Matt Wilson · Jul 13, 2018 · Viewed 11.5k times · Source

I have a GraphQL server which is able to serve timeseries data for a specified source (for example, sensor data). An example query to fetch the data for a sensor might be:

query fetchData {
    timeseriesData(sourceId: "source1") {
      data {
        time
        value
      }
    }
}

In my frontend, I want to allow the user to select 1 or more sources and show a chart with a line for each one. It seems like this would be possible by using a query like this:

query fetchData {
    series1: timeseriesData(sourceId: "source1") {
      data {
        time
        value
      }
    }
    series2: timeseriesData(sourceId: "source2") {
      data {
        time
        value
      }
    }
}

Most GraphQL tutorials seem to focus on static queries (e.g. where the only thing that is changing is the variables, but not the actual shape of the request) - but in my case I need the query itself to be dynamic (one timeseriesData request for each of my selected ids).

I have the following constraints:

  1. Modifying the server's schema is not an option (so I can't pass an array of IDs to the resolver, for example)
  2. My query is specified using a template string e.g. gql`...`
  3. I don't want to have to manually build up the query as a string, because that seems like a recipe for disaster and would mean that I lose all tooling benefits (e.g. autocomplete, syntax highlighting, linting)

The stack I'm using is:

  • Apollo client (specifically apollo-angular)
  • Angular
  • TypeScript
  • graphql-tag (for defining queries)

Ideally, what I want to do is have some way of merging two queries into one, so that I can define them as per the first example but then join them together in an abstraction layer so that I get a single query like the second example to be sent over the wire.

However I'm not sure how to achieve this because graphql-tag is parsing the query into an AST and I'm struggling to understand whether it's feasable to manipulate the query in this way.

What techniques are there for generating a dynamic query like this, where the shape of the query is not known upfront?

Answer

snnsnn picture snnsnn · Feb 23, 2019

You can use fragment to define common fields, and variable bound @include(if: Boolean) and @skip(if: Boolean) directives on that fragment to get dynamic fields that are known at execution time.

According to spec, it is best to avoid manual string interpolation to construct dynamic queries.

Directives1 make it possible to include or skip a field based on a boolean expression passed as a query variable. A directive can be attached to a field or fragment inclusion, and can affect execution of the query in any way the server desires.

query Hero($episode: Episode, $withFriends: Boolean!) {
  hero(episode: $episode) {
    name
    friends @include(if: $withFriends) {
      name
    }
  }
}

And in variables:

{
  "episode": "JEDI",
  "withFriends": false
}

Of course you can send named queries as you did in your second example. Clients will batch the requests automatically.