diff --git a/guides/javascript_client/sync.md b/guides/javascript_client/sync.md index c778852427..4aac695546 100644 --- a/guides/javascript_client/sync.md +++ b/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: diff --git a/javascript_client/src/__tests__/syncTest.ts b/javascript_client/src/__tests__/syncTest.ts index c782b668b1..f9b07719f8 100644 --- a/javascript_client/src/__tests__/syncTest.ts +++ b/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", } diff --git a/javascript_client/src/cli.ts b/javascript_client/src/cli.ts index d3af93403e..db63f5b3b8 100755 --- a/javascript_client/src/cli.ts +++ b/javascript_client/src/cli.ts @@ -24,6 +24,8 @@ optional arguments: (Outfile generation is skipped by default.) --apollo-android-operation-output= Path to a .json file from Apollo-Android's "generateOperationOutput" feature. (Outfile generation is skipped by default.) + --apollo-persisted-query-manifest= Path to a .json file from Apollo's "generate-persisted-query-manifest" tool. + (Outfile generation is skipped by default.) --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, diff --git a/javascript_client/src/sync/index.ts b/javascript_client/src/sync/index.ts index aefcc16ae7..ef9fb81642 100644 --- a/javascript_client/src/sync/index.ts +++ b/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