Advanced React Hacks 3/10 - Dynamic GraphQL

Eventually you will reach a point in your career where you need or want to make dynamic GraphQL queries

At first it will seem "advanced" especially when looking at Google or Stack Overflow answers

You probably are used to static queries strongly typed from a schema.graphql with autocomplete in VSCode

How the hell can that change or be data driven?

Well the answer is in the specification

Typically validation is performed in the context of a request immediately before execution, however a GraphQL service may execute a request without immediately validating it if that exact same request is known to have been validated before. A GraphQL service should only execute requests which at some point were known to be free of any validation errors, and have since not changed.

For example: the request may be validated during development, provided it does not later change, or a service may validate a request once and memoize the result to avoid validating the same request again in the future.

Request may be validated during development => request may be validated during runtime => request may change!

For example with graphql-tag

GraphQL strings are the right way to write queries in your code, because they can be statically analyzed using tools like eslint-plugin-graphql. However, strings are inconvenient to manipulate, if you are trying to do things like add extra fields, merge multiple queries together, or other interesting stuff.

That's where this package comes in - it lets you write your queries with ES2015 template literals and compile them into an AST with the gql tag.

With string interpolation, "dynamic GraphQL" is actually trivial! Just build the string! (And this is JavaScript not Java so you don't need a StringBuilder!)

So,

a) RTFM (in this case the specification!)

b) Never trust the "right way"

c) Look for an existing solution

d) Probably more things I haven't thought of...

Back to basics!

Hope this helps someone!

JavaScript - Converting JSON to XML

This post discusses how to convert between a JavaScript object, XML and JSON (not the same as a JavaScript object).

(Un)Surprisingly there is no native function to do this. There's various implementations of conversion like JXON or jQuery's parseXML, but no official standard. So chances are every developer will have to work with converting between these data interchange formats (and native JavaScript objects) depending on the use case or circumstances.

JavaScript Object to JSON is the most straightforward. Just use the browser's native JSON.stringify (or use a shim if you need to support older browsers). Or is it? Consider the following case:

var obj = ["lightsaber", "blaster", "vibroblade"]

All of these are Star Wars weapons. But this data structure has no idea what's inside it. It doesn't know that these are weapons, or star wars weapons.

So the conversion then, is not trivial to XML. So care must be taken when converting between a JavaScript object and JSON, to send the metadata of the JavaScript object along.

The notation I've seen most used is the $metadata attribute. It has the added advantage of $ not being a valid XML tag character, which means you won't accidently create a node with the metadata.

So instead, obj becomes this

var obj = {

     $weapon: [

        "lightsaber",

        "blaster",

        "vibroblade"

     ]

}

The following is a sample implementation of JavaScript object to JSON



And another sample implementation of JSON to XML



Hope this gives someone ideas, or helps someone