init http-link-dataloader

Author: timsuchanek

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Graphcool
+Copyright (c) 2018 Graphcool
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,81 +1,107 @@
-# batched-graphql-request [![Build Status](https://travis-ci.org/graphcool/batched-graphql-request.svg?branch=master)](https://travis-ci.org/graphcool/graphql-request) [![npm version](https://badge.fury.io/js/graphql-request.svg)](https://badge.fury.io/js/graphql-request) [![Greenkeeper badge](https://badges.greenkeeper.io/graphcool/graphql-request.svg)](https://greenkeeper.io/)
+# http-link-dataloader
 
-📚📡  Node-only, batched version of the graphql-request library 
+A Apollo Link that batches requests both in Node and the Browser.
+You may ask what's the difference to [apollo-link-batch-http](https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-batch-http).
+Instead of having a time-frame/fixed cache size based batching approach like in `apollo-link-batch-http`, this library uses [dataloader](https://github.com/facebook/dataloader) for batching requests. It is a more generic approach just depending on the Node.JS event loop that batches all consecutive queries directly.
+The main use-case for this library is the usage from a [`graphql-yoga`](https://github.com/graphcool/graphql-yoga) server using [`prisma-binding`](https://github.com/graphcool/prisma-binding), but it can be used in any environment, even the browser as the latest `dataloader` version also runs in browser environments.
 
-## Features
+## Usage
 
-* Most **simple and lightweight** GraphQL client
-* Includes batching and caching based [`dataloader`](https://github.com/facebook/dataloader)
-* Promise-based API (works with `async` / `await`)
-* Typescript support (Flow coming soon)
+```ts
+import { BatchedHTTPLink } from 'http-link-dataloader'
 
-## Idea
-The idea of this library is to provide query batching and caching for Node.js backends on a per-request basis.
-That means, per http request to your Node.js backend, you create a new instance of `BatchedGraphQLClient` which has its
-own cache and batching. Sharing a `BatchedGraphQLClient` instance across requests against your webserver is not recommended as that would result
-in Memory Leaks with the Cache growing infinitely. The batching and caching is based on [`dataloader`](https://github.com/facebook/dataloader)
+const link = new BatchedHTTPLink()
 
-## Install
+const token = 'Auth Token'
 
-```sh
-npm install batched-graphql-request
+const httpLink = new BatchedHttpLink({
+  uri: `api endpoint`,
+  headers: { Authorization: `Bearer ${token}` },
+})
 ```
 
-## Usage
-The basic usage is exactly the same as you're used to with [`graphql-request`](https://github.com/graphcool/graphql-request)
-```js
-import { BatchedGraphQLClient } from 'batched-graphql-request'
+## Caching behavior
+
+Note that the dataloader cache aggressively caches everything! That means if you don't want to cache anymore, just create a new instance of `BatchedHTTPLink`.
+A good fit for this is every incoming HTTP request in a server environment - on each new HTTP request a new `BatchedHTTPLink` instance is created.
+
+## Batching
+
+This library uses array-based batching. Querying 2 queries like this creates the following payload:
+
+```graphql
+query {
+  Item(id: "1") {
+    id
+    name
+    text
+  }
+}
+```
 
-const client = new BatchedGraphQLClient(endpoint, { headers: {} })
-client.request(query, variables).then(data => console.log(data)) 
+```graphql
+query {
+  Item(id: "2") {
+    id
+    name
+    text
+  }
+}
 ```
 
-## Examples
+Instead of sending 2 separate http requests, it gets combined into one:
 
-### Creating a new Client per request
-In this example, we proxy requests that come in the form of [batched array](https://blog.graph.cool/improving-performance-with-apollo-query-batching-66455ea9d8bc).
-Instead of sending each request individually to `my-endpoint`, all requests are again batched together and send grouped to
-the underlying endpoint, which increases the performance dramatically.
 ```js
-import { BatchedGraphQLClient } from 'batched-graphql-request'
-import * as express from 'express'
-import * as bodyParser from 'body-parser'
-
-const app = express()
-
-/*
-This accepts POST requests to /graphql of this form:
-[
-  {query: "...", variables: {}},
-  {query: "...", variables: {}},
-  {query: "...", variables: {}}
+;[
+  {
+    query: `query {
+      Item(id: "1") {
+        id
+        name
+        text
+      }
+    }`,
+  },
+  {
+    query: `query {
+      Item(id: "2") {
+        id
+        name
+        text
+      }
+    }`,
+  },
 ]
- */
-
-app.use(
-  '/graphql',
-  bodyParser.json(),
-  async (req, res) => {
-    const client = new BatchedGraphQLClient('my-endpoint', {
-      headers: {
-        Authorization: 'Bearer my-jwt-token',
-      },
-    })
-    
-    const requests = Array.isArray(req.body) ? req.body : [req.body]
-    
-    const results = await Promise.all(requests.map(({query, variables}) => client.request(query, variables)))
-    
-    res.json(results)
-  }
-)
+```
 
-app.listen(3000, () =>
-  console.log('Server running.'),
-)
+**Note that the GraphQL Server needs to support the array-based batching!**
+(Prisma supports this out of the box)
+
+## Even better batching
+
+A batching that would even be faster is alias-based batching. Instead of creating the array described above, it would generate something like this:
+
+```js
+  {
+    query: `
+    query {
+      item_1: Item(id: "1") {
+        id
+        name
+        text
+      }
+      item_2: Item(id: "2") {
+        id
+        name
+        text
+      }
+    }`
+  },
 ```
 
-To learn more about the usage, please check out [graphql-request](https://github.com/graphcool/graphql-request)
+This requires a lot more logic and resolution logic for aliases, but would be a lot faster than the array based batching!
+Anyone intersted in working on this is more than welcome to do so!
+You can either create an issue or just reach out to us in slack and join our #contributors channel.
 
 ## Help & Community [![Slack Status](https://slack.graph.cool/badge.svg)](https://slack.graph.cool)
 

package.json

@@ -1,28 +1,20 @@
 {
-  "name": "batched-graphql-request",
-  "version": "0.4.1",
+  "name": "http-link-dataloader",
+  "version": "0.0.0",
   "main": "dist/src/index.js",
   "typings": "./dist/src/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/graphcool/batched-graphql-request.git"
+    "url": "git+https://github.com/graphcool/http-link-dataloader.git"
   },
-  "keywords": [
-    "graphql",
-    "request",
-    "fetch",
-    "graphql-client",
-    "apollo"
-  ],
+  "keywords": ["graphql", "request", "fetch", "graphql-client", "apollo"],
   "author": "Tim Suchanek <tim.suchanek@gmail.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/graphcool/batched-graphql-request/issues"
+    "url": "https://github.com/graphcool/http-link-dataloader/issues"
   },
-  "homepage": "https://github.com/graphcool/batched-graphql-request",
+  "homepage": "https://github.com/graphcool/http-link-dataloader",
   "scripts": {
     "prepublish": "npm run build",
     "build": "rm -rf dist && tsc -d",
@@ -39,6 +31,7 @@
     "typescript": "^2.7.1"
   },
   "dependencies": {
+    "apollo-link": "^1.0.7",
     "cross-fetch": "1.1.1",
     "dataloader": "^1.4.0"
   }

src/BatchedGraphQLClient.ts

@@ -0,0 +1,73 @@
+import { ClientError, Options, Variables } from './types'
+import 'cross-fetch/polyfill'
+import * as DataLoader from 'dataloader'
+
+export { ClientError } from './types'
+
+export class BatchedGraphQLClient {
+  public uri: string
+  public options: Options
+  private dataloader: DataLoader<string, any>
+
+  constructor(uri: string, options?: Options) {
+    this.uri = uri
+    this.options = options || {}
+    this.dataloader = new DataLoader(this.load)
+  }
+
+  async request<T extends any>(
+    query: string,
+    variables?: Variables,
+    operationName?: string,
+  ): Promise<T> {
+    const body = JSON.stringify({
+      query,
+      variables: variables ? variables : undefined,
+      operationName: operationName ? operationName : undefined,
+    })
+    return this.dataloader.load(body)
+  }
+
+  load = async (keys: string[]): Promise<any> => {
+    const requests = keys.map(k => JSON.parse(k))
+    const body = JSON.stringify(requests)
+
+    const response = await fetch(this.uri, {
+      method: 'POST',
+      ...this.options,
+      headers: Object.assign(
+        { 'Content-Type': 'application/json' },
+        this.options.headers,
+      ),
+      body,
+    })
+
+    const results = await getResults(response)!
+
+    const allResultsHaveData =
+      results.filter(r => r.data).length === results.length
+
+    if (response.ok && !results.find(r => r.errors) && allResultsHaveData) {
+      return results.map(r => r.data)
+    } else {
+      const errorIndex = results.findIndex(r => r.errors)
+      const result = results[errorIndex]
+      const { query, variables } = requests[errorIndex]
+      const errorResult =
+        typeof result === 'string' ? { error: result } : result
+      throw new ClientError(
+        { ...errorResult, status: response.status },
+        { query, variables },
+      )
+    }
+  }
+}
+
+async function getResults(response: Response): Promise<any> {
+  const contentType = response.headers.get('Content-Type')
+  if (contentType && contentType.startsWith('application/json')) {
+    return await response.json()
+  } else {
+    return await response.text()
+  }
+}

src/BatchedHTTPLink.ts

@@ -0,0 +1,55 @@
+import { ApolloLink, Observable, Operation } from 'apollo-link'
+import { print } from 'graphql'
+import { BatchedGraphQLClient } from './index'
+import { Options, HttpOptions } from './types'
+
+export class BatchedHttpLink extends ApolloLink {
+  constructor(options: HttpOptions) {
+    super(BatchedHttpLink.createBatchedHttpRequest(options))
+  }
+
+  private static createBatchedHttpRequest(options: HttpOptions) {
+    const { uri, ...rest } = options
+    const client = new BatchedGraphQLClient(uri, rest)
+
+    return (operation: Operation) =>
+      new Observable(observer => {
+        const {
+          headers,
+          uri: contextURI,
+        }: Record<string, any> = operation.getContext()
+
+        const { operationName, variables, query } = operation
+
+        if (contextURI) {
+          client.uri = contextURI
+        }
+
+        if (headers) {
+          client.options = {
+            ...client.options,
+            headers: {
+              ...client.options.headers,
+              ...headers,
+            },
+          }
+        }
+
+        client
+          .request(print(query), variables, operationName)
+          .then(response => {
+            operation.setContext({ response })
+            observer.next({ data: response })
+            observer.complete()
+            return response
+          })
+          .catch(err => {
+            if (err.name === 'AbortError') {
+              return
+            }
+
+            observer.error(err)
+          })
+      })
+  }
+}