[client-preset] built-in support for persisted documents

[n1ru4l]

Is your feature request related to a problem? Please describe.

Currently, it is hard to implement persisted operations easily.

Describe the solution you'd like

The client preset should have a functionality that allows doing the following things:

Attach a hash to the DocumentNodes

gql/graphql.ts

export const AllFilmsWithVariablesQueryDocument = ({
  ["__hash"]: "<SHA1 HASH OF THE OPERATION>",
  kind: "Document",
  definitions: [
    {
      kind: "OperationDefinition",
      operation: "query",
      name: { kind: "Name", value: "allFilmsWithVariablesQuery" },
      variableDefinitions: [
        {
          kind: "VariableDefinition",
          variable: {
            kind: "Variable",
            name: { kind: "Name", value: "first" }
          },
          type: {
            kind: "NonNullType",
            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } }
          }
        }
      ],
      selectionSet: {
        kind: "SelectionSet",
        selections: [
          {
            kind: "Field",
            name: { kind: "Name", value: "allFilms" },
            arguments: [
              {
                kind: "Argument",
                name: { kind: "Name", value: "first" },
                value: {
                  kind: "Variable",
                  name: { kind: "Name", value: "first" }
                }
              }
            ],
            selectionSet: {
              kind: "SelectionSet",
              selections: [
                {
                  kind: "Field",
                  name: { kind: "Name", value: "edges" },
                  selectionSet: {
                    kind: "SelectionSet",
                    selections: [
                      {
                        kind: "Field",
                        name: { kind: "Name", value: "node" },
                        selectionSet: {
                          kind: "SelectionSet",
                          selections: [
                            {
                              kind: "FragmentSpread",
                              name: { kind: "Name", value: "FilmItem" }
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    },
    ...FilmItemFragmentDoc.definitions
  ]
} as unknown) as DocumentNode<
  AllFilmsWithVariablesQueryQuery,
  AllFilmsWithVariablesQueryQueryVariables
>;

This is used by your urql/apollo-client. The hash property (__hash) of the typed document node will be used in the network layer for executing the operation (instead of the operation string). This is similar to what relay does (https://codesandbox.io/s/relay-sandbox-nxl7i?file=/src/__generated__/TodoAppQuery.graphql.ts:7754-7810).

Challenges here are client-side directives, we would have to add a filter functionality (@connection, @client), etc. ALso, some clients (urql/apollo-client) add __typename selections. This would also be something we need to add to the documents automatically.

Export a map of Record<Hash, OperationString> mappings.

gql/persisted-operations.json

{
  "<SHA1 HASH OF THE OPERATION>": "\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n"
}

This can be pushed/fed into your GraphQL Yoga instance / persisted operations store (in the future Hive) before deploying your application.