Add docs and CLI option

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__/syncTest.ts

@@ -46,6 +46,7 @@ describe("sync operations", () => {
     it("works with persisted query manifest", () => {
       var options = {
         client: "test-1",
+        outfile: "./src/OperationStoreClient.js",
         apolloPersistedQueryManifest: "./src/sync/__tests__/generate-persisted-query-manifest.json",
       }
 

javascript_client/src/cli.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/sync/index.ts

@@ -129,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