Graphql Query Batcher

A light weight (<700 bytes) graphql query batcher for javascript.

Docs

QueryBatcher

Create a batcher client.

Parameters

• fetcher Fetcher A function that can handle the network requests to graphql endpoint
• options Options the options to be used by client (optional, default {})
  • options.batchInterval integer duration (in MS) of each batch window. (default 6) (optional, default 6)
  • options.shouldBatch boolean should the client batch requests. (default true) (optional, default true)
  • options.maxBatchSize integer max number of requests in a batch. (default 0) (optional, default 0)
  • options.defaultHeaders boolean default headers to include with every request

Examples

const fetcher = batchedQuery => fetch('path/to/graphql', {
   method: 'post',
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',
   },
   body: JSON.stringify(batchedQuery),
   credentials: 'include',
})
.then(response => response.json())

const client = new QueryBatcher(fetcher, { maxBatchSize: 10 })

fetch

Fetch will send a graphql request and return the parsed json.

Parameters

• query string the graphql query.
• variables Variables any variables you wish to inject as key/value pairs.
• operationName [string] the graphql operationName.
• overrides Options the client options overrides. (optional, default {})

Examples

client.fetch(`
   query getHuman($id: ID!) {
     human(id: $id) {
       name
       height
     }
   }
`, { id: "1001" }, 'getHuman')
   .then(human => {
     // do something with human
     console.log(human);
   });

Returns promise resolves to parsed json of server response

forceFetch

Fetch will send a graphql request and return the parsed json.

Parameters

• query string the graphql query.
• variables Variables any variables you wish to inject as key/value pairs.
• operationName [string] the graphql operationName.
• overrides Options the client options overrides. (optional, default {})

Examples

client.forceFetch(`
   query getHuman($id: ID!) {
     human(id: $id) {
       name
       height
     }
   }
`, { id: "1001" }, 'getHuman')
   .then(human => {
     // do something with human
     console.log(human);
   });

Returns Promise<Array<Result>> resolves to parsed json of server response

Default Options

const options = {
  shouldBatch: true,  // should we batch queries?
  batchInterval: 6,   // duration of each batch window (in MS)
  maxBatchSize: 0,    // max number of requests in a batch (0 = no max)
};

Requirements

The graphql implementation you are using must suppoprt batching! This means that your graphql endpoint should be able to take an array of requests and return an array of results.

To learn more read this: https://dev-blog.apollodata.com/query-batching-in-apollo-63acfd859862

To see an expmaple implementation in Golang, see https://github.com/nicksrandall/batched-graphql-handler

Alternatives

• Apollo