GraphQL - Dynamically create shape of a query

Question

Is there a package/methodology for dynamically creating a graphql query on the client-side? For example, let's pretend that I have the following query

query { 
  foo {
    a
    b
    c {
      d {
        e
        f
      }
    g
  }
}

I want to allow the user to pick/choose what data fields get returned from that query. In other words, if they do not want a field back, I would omit it from the query. * This is because some fields contain a very large amount of data and it would be better to avoid bandwidth issues if it can be avoided.

Do I have to build the query by hand (ugh) or is there a javascript tool out there that people use for this situation?

I saw this but it looks like it's no longer maintained and has some issues noted in the issues tab: https://github.com/codemeasandwich/graphql-query-builder

Answer 1

You might have to build the query yourself (it's just a string, after all), in which case making use of the Builder pattern might help, since it seems like you have a complex set of parameters determining what should be included in the query.

Have you looked at these SO answers? Do these get at what you need?

GraphQL dynamic query building

React Apollo dynamically create query from state (if you're using React/Apollo)

One thing to keep in mind is that you lose some caching and security benefits by using dynamic, rather than static, client queries.

I would also suggest alerting your users that selecting certain fields will incur an expensive query; at the very least, paginate that data so that you're not returning such a large volume of it all at once.