Merge pull request #4798 from rmosolgo/js-generate-persisted-query-manifest-support

Support generate-persisted-query-manifest for OperationStore

Author: rmosolgo

guides/javascript_client/sync.md

@@ -17,6 +17,7 @@ JavaScript support for GraphQL projects using [graphql-pro](https://graphql.pro)
 - [Apollo Link support](#use-with-apollo-link)
 - [Apollo Codegen Support](#use-with-apollo-codegen)
 - [Apollo Android support](#use-with-apollo-android)
+- [Apollo Persisted Queries Support](#use-with-apollo-persisted-queries)
 - [Plain JS support](#use-with-plain-javascript)
 - [Authorization](#authorization)
 
@@ -263,6 +264,29 @@ end
 
 You may also have to __update your app__ to send an identifier, so that the server can determine the "client name" used with the operation store. (Apollo Android sends a query hash, but the operation store expects IDs in the form `#{client_name}/#{query_hash}`.)
 
+## Use with Apollo Persisted Queries
+
+Apollo client has a [Persisted Queries Link](https://www.apollographql.com/docs/react/api/link/persisted-queries/). You can use that link with GraphQL-Pro's {% internal_link "OperationStore", "/operation_store/overview" %}. First, create a manifest with [`generate-persisted-query-manifest`](https://www.apollographql.com/docs/react/api/link/persisted-queries/#1-generate-operation-manifests), then, pass the path to that file to `sync`:
+
+```sh
+$ graphql-ruby-client sync --apollo-persisted-query-manifest=path/to/manifest.json ...
+```
+
+Then, configure Apollo Client to [use your persisted query manifest](https://www.apollographql.com/docs/react/api/link/persisted-queries/#persisted-queries-implementation).
+
+Finally, update your controller to receive the operation ID and pass it as `context[:operation_id]`:
+
+```ruby
+client_name = "..." # TODO: send the client name as a query param or header
+persisted_query_hash = params[:extensions][:persistedQuery][:sha256Hash]
+context = {
+  # ...
+  operation_id: "#{client_name}/#{persisted_query_hash}"
+}
+```
+
+The `operation_id` will also need your client name. Using Apollo Client, you could send this as a [custom header](https://www.apollographql.com/docs/react/networking/basic-http-networking/#customizing-request-headers) or another way that works for your application (eg, session or user agent).
+
 ## Use with plain JavaScript
 
 `OperationStoreClient.getOperationId` takes an operation name as input and returns the server-side alias for that operation:

javascript_client/src/__tests__/__snapshots__/syncTest.ts.snap

@@ -42,6 +42,20 @@ describe("sync operations", () => {
         expect(generatedCode).toMatchSnapshot()
       })
     })
+
+    it("works with persisted query manifest", () => {
+      var options = {
+        client: "test-1",
+        outfile: "./src/OperationStoreClient.js",
+        apolloPersistedQueryManifest: "./src/sync/__tests__/generate-persisted-query-manifest.json",
+      }
+
+      return sync(options).then(function() {
+        var generatedCode = fs.readFileSync("./src/OperationStoreClient.js", "utf8")
+        expect(generatedCode).toMatch('"TestQuery2": "xyz-123"')
+        expect(generatedCode).toMatchSnapshot()
+      })
+    })
   })
 
   describe("custom HTTP options", () => {

javascript_client/src/__tests__/syncTest.ts

@@ -24,6 +24,8 @@ optional arguments:
                                               (Outfile generation is skipped by default.)
   --apollo-android-operation-output=<path>  Path to a .json file from Apollo-Android's "generateOperationOutput" feature.
                                               (Outfile generation is skipped by default.)
+  --apollo-persisted-query-manifest=<path>  Path to a .json file from Apollo's "generate-persisted-query-manifest" tool.
+                                              (Outfile generation is skipped by default.)
   --mode=<mode>                             Treat files like a certain kind of project:
                                               relay: treat files like relay-compiler output
                                               project: treat files like a cohesive project (fragments are shared, names must be unique)
@@ -63,6 +65,7 @@ optional arguments:
       relayPersistedOutput: argv["relay-persisted-output"],
       apolloCodegenJsonOutput: argv["apollo-codegen-json-output"],
       apolloAndroidOperationOutput: argv["apollo-android-operation-output"],
+      apolloPersistedQueryManifest: argv["apollo-persisted-query-manifest"],
       url: argv.url,
       client: argv.client,
       outfile: argv.outfile,

javascript_client/src/cli.ts

@@ -0,0 +1,18 @@
+{
+  "format": "apollo-persisted-query-manifest",
+  "version": 1,
+  "operations": [
+    {
+      "id": "4a29162b05ee4d82ad02e8f50af4bf112f47181ec558a7100a",
+      "name": "TestQuery1",
+      "type": "query",
+      "body": "query TestQuery1 {\n  testing {\n  id\n  label\n  description\n  __typename\n} }"
+    },
+    {
+      "id": "xyz-123",
+      "name": "TestQuery2",
+      "type": "mutation",
+      "body": "query TestQuery2 {\n  testing2 {\n  id2\n  label\n  description2\n  __typename\n} }"
+    }
+  ]
+}

javascript_client/src/sync/__tests__/__snapshots__/preparePersistedQueryListTest.ts.snap

@@ -0,0 +1,7 @@
+import preparePersistedQueryList from "../preparePersistedQueryList"
+
+it("reads generate-persisted-query-manifest output", () => {
+  const manifestPath = "./src/sync/__tests__/generate-persisted-query-manifest.json"
+  var ops = preparePersistedQueryList(manifestPath)
+  expect(ops).toMatchSnapshot()
+})

javascript_client/src/sync/__tests__/generate-persisted-query-manifest.json

@@ -4,12 +4,14 @@ import { generateClientCode, gatherOperations, ClientOperation } from "./generat
 import Logger from "./logger"
 import fs from "fs"
 import { removeClientFieldsFromString } from "./removeClientFields"
+import preparePersistedQueryList from "./preparePersistedQueryList"
 
 interface SyncOptions {
   path?: string,
   relayPersistedOutput?: string,
   apolloAndroidOperationOutput?: string,
   apolloCodegenJsonOutput?: string,
+  apolloPersistedQueryManifest?: string,
   secret?: string
   url?: string,
   mode?: string,
@@ -32,6 +34,7 @@ interface SyncOptions {
  * @param {String} options.path - A glob to recursively search for `.graphql` files (Default is `./`)
  * @param {String} options.relayPersistedOutput - A path to a `.json` file from `relay-compiler`'s  `--persist-output` option
  * @param {String} options.apolloCodegenJsonOutput - A path to a `.json` file from `apollo client:codegen ... --type json`
+ * @param {String} options.apolloPersistedQueryManifest - A path to a `.json` file from `generate-persisted-query-manifest`
  * @param {String} options.secret - HMAC-SHA256 key which must match the server secret (default is no encryption)
  * @param {String} options.url - Target URL for sending prepared queries. If omitted, then an outfile is generated without sending operations to the server.
  * @param {String} options.mode - If `"file"`, treat each file separately. If `"project"`, concatenate all files and extract each operation. If `"relay"`, treat it as relay-compiler output
@@ -107,6 +110,10 @@ function sync(options: SyncOptions) {
         body: bodyWithoutClientFields,
       })
     })
+  } else if (options.apolloPersistedQueryManifest) {
+    var payload: { operations: ClientOperation[] } = {
+      operations: preparePersistedQueryList(options.apolloPersistedQueryManifest)
+    }
   } else {
     var payload = gatherOperations({
       path: graphqlGlob,
@@ -122,7 +129,7 @@ function sync(options: SyncOptions) {
   var outfile: string | null
   if (options.outfile) {
     outfile = options.outfile
-  } else if (options.relayPersistedOutput || options.apolloAndroidOperationOutput || options.apolloCodegenJsonOutput) {
+  } else if (options.relayPersistedOutput || options.apolloAndroidOperationOutput || options.apolloCodegenJsonOutput || options.apolloPersistedQueryManifest) {
     // These artifacts have embedded IDs in its generated files,
     // no need to generate an outfile.
     outfile = null

javascript_client/src/sync/__tests__/preparePersistedQueryListTest.ts

@@ -0,0 +1,15 @@
+import fs from "fs"
+
+// Transform the output from generate-persisted-query-manifest
+// to something that OperationStore `sync` can use.
+export default function preparePersistedQueryList(pqlPath: string) {
+  const pqlString = fs.readFileSync(pqlPath, "utf8")
+  const pqlJson = JSON.parse(pqlString)
+  return pqlJson.operations.map(function(persistedQueryConfig: { body: string, id: string, name: string, type: string }) {
+    return {
+      body: persistedQueryConfig.body,
+      alias: persistedQueryConfig.id,
+      name: persistedQueryConfig.name
+    }
+  })
+}