@graphitation/apollo-react-relay-duct-tape 0.7.4 → 1.0.0-alpha.3

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # Change Log - @graphitation/apollo-react-relay-duct-tape
 
-This log was last generated on Fri, 14 Jan 2022 11:15:11 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Jan 2022 11:15:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## 0.7.4
 
-Fri, 14 Jan 2022 11:15:11 GMT
+Fri, 14 Jan 2022 11:15:34 GMT
 
 ### Patches
 

package/README.md

@@ -5,3 +5,125 @@ A compatibility wrapper that provides the react-relay API on top of Apollo Clien
 _The name is a reference to the Apollo 13 mission._
 
 Use this together with [relay-compiler-language-graphitation](../relay-compiler-language-graphitation) to have typings generated.
+
+# Setup
+
+### Installation
+
+- Install the packages from this repo:
+
+  ```
+  yarn add @graphitation/apollo-react-relay-duct-tape
+  yarn add --dev relay-compiler-language-graphitation
+  ```
+
+- Patch your version of `@apollo/client` using the patch found in [the patches directory](../../patches). You can either do so manually or use a tool like [patch-package](https://github.com/ds300/patch-package).
+
+- For an expedient developer-experience, you will want to install [the `watchman` tool](https://facebook.github.io/watchman/).
+  - On macOS (using [homebrew](https://brew.sh)): `$ brew install watchman`
+  - On Windows (using [chocolatey](https://chocolatey.org)): `$ choco install watchman`
+
+### Configuration
+
+- Configure Apollo Client's cache to automatically add `__typename` field selections, which concrete types implement the `Node` interface, and the type-policies needed to read the watch query data from the store:
+
+  ```ts
+  import { InMemoryCache } from "@apollo/client";
+  import { typePolicies } from "@graphitation/apollo-react-relay-duct-tape";
+
+  const cache = new InMemoryCache({
+    addTypename: true,
+    // Be sure to specify types that implement the Node interface
+    // See https://www.apollographql.com/docs/react/data/fragments/#using-fragments-with-unions-and-interfaces
+    possibleTypes: {
+      Node: ["Todo"],
+    },
+    // Either use the `typePolicies` object directly or otherwise extend appropriately
+    typePolicies: {
+      Query: {
+        fields: {
+          __fragments: {
+            read: typePolicies.Query.fields.__fragments.read,
+          },
+          node: {
+            read: typePolicies.Query.fields.node.read,
+          },
+        },
+      },
+      Node: {
+        fields: {
+          __fragments: {
+            read: typePolicies.Node.fields.__fragments.read,
+          },
+        },
+      },
+    },
+  });
+  ```
+
+- Configure webpack to transform your code by replacing inline GraphQL documents with their compiled artefacts:
+
+  ```ts
+  const {
+    createImportDocumentsTransform,
+  } = require("@graphitation/apollo-react-relay-duct-tape/lib/storeObservation/createImportDocumentsTransform");
+
+  const config: webpack.Configuration = {
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: "ts-loader",
+          exclude: /node_modules/,
+          options: {
+            getCustomTransformers: () => ({
+              before: [createImportDocumentsTransform()],
+            }),
+          },
+        },
+      ],
+    },
+  };
+  ```
+
+- TODO: Have a `Node` interface definition
+- TODO: Add `node` root field
+
+- Optionally, if you rely on Apollo Client's `@client` directive, be sure to explicitly add it to your local copy of your schema, otherwise the compiler will not accept its use.
+
+  ```graphql
+  directive @client(always: Boolean) on FIELD
+  ```
+
+## Usage
+
+### Build
+
+In a shell, start the compiler and point it to your schema and source. Depending on the size of the code-base a first run may take a while, but subsequent builds should cached. For developer-expedience, it is advised to run the compiler using the watch mode -- provided you have installed the `watchman` tool.
+
+```
+$ yarn graphitation-compiler          \
+    --schema ./path/to/schema.graphql \
+    --src ./path/to/source            \
+    --watch
+```
+
+TODO:
+
+- Add `Node` interface to type that you want to start a new watch query for
+- Restart compiler
+
+### Runtime
+
+TODO:
+
+- Add query hook
+- Add fragment hook
+- Import and use typings
+
+## Architecture
+
+- Fragment reference variables need to be propagated to child fragment hooks, so refetch hooks can re-use original request variables.
+  - This cannot be done through React Context, because a refetch hook needs to be able to [partially] update original variables, which cannot be done with React Context.
+  - Instead, we pass these as React props, which are populated through GraphQL as we can know exactly where [child] fragments are being referenced and the data needs to be encoded. The actual resolving of the data is done through the (./packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts)[fragmentReferencesFieldPolicy] Apollo Cache field policy.
+  - Because we can't just add a Apollo Cache field policy to _any_ type, as we don't even know all types, we add it to the `Node` interface instead. The one other type we can assume to exist is the `Query` type.

package/lib/convertFetchPolicy.d.ts

@@ -0,0 +1,9 @@
+import type { WatchQueryFetchPolicy as ApolloWatchQueryFetchPolicy } from "@apollo/client";
+import type { FetchPolicy } from "./types";
+/**
+ * This is for internal use only.
+ */
+declare type PrivateFetchPolicy = FetchPolicy | "no-cache";
+export declare function convertFetchPolicy(fetchPolicy: PrivateFetchPolicy | undefined): ApolloWatchQueryFetchPolicy | undefined;
+export {};
+//# sourceMappingURL=convertFetchPolicy.d.ts.map

package/lib/convertFetchPolicy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convertFetchPolicy.d.ts","sourceRoot":"","sources":["../src/convertFetchPolicy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,aAAK,kBAAkB,GAAG,WAAW,GAAG,UAAU,CAAC;AAanD,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,kBAAkB,GAAG,SAAS,GAC1C,2BAA2B,GAAG,SAAS,CAEzC"}

package/lib/convertFetchPolicy.js

@@ -0,0 +1,20 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {get: all[name], enumerable: true});
+};
+__markAsModule(exports);
+__export(exports, {
+  convertFetchPolicy: () => convertFetchPolicy
+});
+const FETCH_POLICY_MAPPING = {
+  "store-or-network": "cache-first",
+  "store-and-network": "cache-and-network",
+  "network-only": "network-only",
+  "store-only": "cache-only",
+  "no-cache": "no-cache"
+};
+function convertFetchPolicy(fetchPolicy) {
+  return fetchPolicy && FETCH_POLICY_MAPPING[fetchPolicy];
+}

package/lib/convertFetchPolicy.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/convertFetchPolicy.ts"],
+  "sourcesContent": ["import type { WatchQueryFetchPolicy as ApolloWatchQueryFetchPolicy } from \"@apollo/client\";\nimport type { FetchPolicy } from \"./types\";\n\n/**\n * This is for internal use only.\n */\ntype PrivateFetchPolicy = FetchPolicy | \"no-cache\";\n\nconst FETCH_POLICY_MAPPING: Record<\n  PrivateFetchPolicy,\n  ApolloWatchQueryFetchPolicy\n> = {\n  \"store-or-network\": \"cache-first\",\n  \"store-and-network\": \"cache-and-network\",\n  \"network-only\": \"network-only\",\n  \"store-only\": \"cache-only\",\n  \"no-cache\": \"no-cache\",\n};\n\nexport function convertFetchPolicy(\n  fetchPolicy: PrivateFetchPolicy | undefined\n): ApolloWatchQueryFetchPolicy | undefined {\n  return fetchPolicy && FETCH_POLICY_MAPPING[fetchPolicy];\n}\n"],
+  "mappings": ";;;;;;AAAA;AAAA;AAAA;AAAA;AAQA,MAAM,uBAGF;AAAA,EACF,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA;AAGP,4BACL,aACyC;AACzC,SAAO,eAAe,qBAAqB;AAAA;",
+  "names": []
+}

package/lib/convertFetchPolicy.mjs

@@ -0,0 +1,14 @@
+// src/convertFetchPolicy.ts
+var FETCH_POLICY_MAPPING = {
+  "store-or-network": "cache-first",
+  "store-and-network": "cache-and-network",
+  "network-only": "network-only",
+  "store-only": "cache-only",
+  "no-cache": "no-cache"
+};
+function convertFetchPolicy(fetchPolicy) {
+  return fetchPolicy && FETCH_POLICY_MAPPING[fetchPolicy];
+}
+export {
+  convertFetchPolicy
+};

package/lib/convertFetchPolicy.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/convertFetchPolicy.ts"],
+  "sourcesContent": ["import type { WatchQueryFetchPolicy as ApolloWatchQueryFetchPolicy } from \"@apollo/client\";\nimport type { FetchPolicy } from \"./types\";\n\n/**\n * This is for internal use only.\n */\ntype PrivateFetchPolicy = FetchPolicy | \"no-cache\";\n\nconst FETCH_POLICY_MAPPING: Record<\n  PrivateFetchPolicy,\n  ApolloWatchQueryFetchPolicy\n> = {\n  \"store-or-network\": \"cache-first\",\n  \"store-and-network\": \"cache-and-network\",\n  \"network-only\": \"network-only\",\n  \"store-only\": \"cache-only\",\n  \"no-cache\": \"no-cache\",\n};\n\nexport function convertFetchPolicy(\n  fetchPolicy: PrivateFetchPolicy | undefined\n): ApolloWatchQueryFetchPolicy | undefined {\n  return fetchPolicy && FETCH_POLICY_MAPPING[fetchPolicy];\n}\n"],
+  "mappings": ";AAQA,IAAM,uBAGF;AAAA,EACF,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA;AAGP,4BACL,aACyC;AACzC,SAAO,eAAe,qBAAqB;AAAA;",
+  "names": []
+}

package/lib/hooks.d.ts

@@ -1,6 +1,5 @@
-import { DocumentNode } from "graphql";
-import { KeyType, KeyTypeData, OperationType } from "./types";
-export declare type GraphQLTaggedNode = DocumentNode;
+import { FetchPolicy, GraphQLTaggedNode, KeyType, KeyTypeData, OperationType } from "./types";
+import { RefetchFn, PaginationFn } from "./storeObservation/compiledHooks";
 /**
  * Executes a GraphQL query.
  *
@@ -47,7 +46,7 @@ export declare type GraphQLTaggedNode = DocumentNode;
  * @returns An object with either an error, the result data, or neither while loading.
  */
 export declare function useLazyLoadQuery<TQuery extends OperationType>(query: GraphQLTaggedNode, variables: TQuery["variables"], options?: {
-    fetchPolicy: "cache-first";
+    fetchPolicy?: FetchPolicy;
 }): {
     error?: Error;
     data?: TQuery["response"];
@@ -116,7 +115,18 @@ export declare function useLazyLoadQuery<TQuery extends OperationType>(query: Gr
  *                    fragment.
  * @returns The data corresponding to the field selections.
  */
-export declare function useFragment<TKey extends KeyType>(_fragmentInput: GraphQLTaggedNode, fragmentRef: TKey): KeyTypeData<TKey>;
+export declare function useFragment<TKey extends KeyType>(fragmentInput: GraphQLTaggedNode, fragmentRef: TKey): KeyTypeData<TKey>;
+export declare function useRefetchableFragment<TQuery extends OperationType, TKey extends KeyType>(fragmentInput: GraphQLTaggedNode, fragmentRef: TKey): [data: KeyTypeData<TKey>, refetch: RefetchFn<TQuery["variables"]>];
+export declare function usePaginationFragment<TQuery extends OperationType, TKey extends KeyType>(fragmentInput: GraphQLTaggedNode, fragmentRef: TKey): {
+    data: KeyTypeData<TKey>;
+    loadNext: PaginationFn;
+    loadPrevious: PaginationFn;
+    hasNext: boolean;
+    hasPrevious: boolean;
+    isLoadingNext: boolean;
+    isLoadingPrevious: boolean;
+    refetch: RefetchFn<TQuery["variables"]>;
+};
 interface GraphQLSubscriptionConfig<TSubscriptionPayload extends OperationType> {
     subscription: GraphQLTaggedNode;
     variables: TSubscriptionPayload["variables"];

package/lib/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAa,MAAM,SAAS,CAAC;AAEzE,oBAAY,iBAAiB,GAAG,YAAY,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,aAAa,EAC3D,KAAK,EAAE,iBAAiB,EACxB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAC9B,OAAO,CAAC,EAAE;IAAE,WAAW,EAAE,aAAa,CAAA;CAAE,GACvC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAA;CAAE,CAE9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,wBAAgB,WAAW,CAAC,IAAI,SAAS,OAAO,EAC9C,cAAc,EAAE,iBAAiB,EACjC,WAAW,EAAE,IAAI,GAChB,WAAW,CAAC,IAAI,CAAC,CAEnB;AAGD,UAAU,yBAAyB,CACjC,oBAAoB,SAAS,aAAa;IAE1C,YAAY,EAAE,iBAAiB,CAAC;IAChC,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,oBAAoB,SAAS,aAAa,EACxE,MAAM,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,GACtD,IAAI,CAwBN;AAED,UAAU,yBAAyB,CAAC,gBAAgB,SAAS,aAAa;IACxE,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,kBAAkB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI,CAAC;CACnE;AAED,aAAK,gBAAgB,CAAC,gBAAgB,SAAS,aAAa,IAAI,CAC9D,OAAO,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,KACjD,OAAO,CAAC;IAAE,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;CAAE,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,WAAW,CAAC,gBAAgB,SAAS,aAAa,EAChE,QAAQ,EAAE,iBAAiB,GAC1B,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,CAuB/C"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,SAAS,EACT,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,aAAa,EAC3D,KAAK,EAAE,iBAAiB,EACxB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAC9B,OAAO,CAAC,EAAE;IAAE,WAAW,CAAC,EAAE,WAAW,CAAA;CAAE,GACtC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAA;CAAE,CAa9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,wBAAgB,WAAW,CAAC,IAAI,SAAS,OAAO,EAC9C,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,IAAI,GAChB,WAAW,CAAC,IAAI,CAAC,CAMnB;AAED,wBAAgB,sBAAsB,CACpC,MAAM,SAAS,aAAa,EAC5B,IAAI,SAAS,OAAO,EAEpB,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,IAAI,GAChB,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CASpE;AAED,wBAAgB,qBAAqB,CACnC,MAAM,SAAS,aAAa,EAC5B,IAAI,SAAS,OAAO,EAEpB,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,IAAI,GAChB;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACxB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;CACzC,CASA;AAGD,UAAU,yBAAyB,CACjC,oBAAoB,SAAS,aAAa;IAE1C,YAAY,EAAE,iBAAiB,CAAC;IAChC,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,oBAAoB,SAAS,aAAa,EACxE,MAAM,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,GACtD,IAAI,CA4BN;AAED,UAAU,yBAAyB,CAAC,gBAAgB,SAAS,aAAa;IACxE,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,kBAAkB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI,CAAC;CACnE;AAED,aAAK,gBAAgB,CAAC,gBAAgB,SAAS,aAAa,IAAI,CAC9D,OAAO,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,KACjD,OAAO,CAAC;IAAE,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;CAAE,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,WAAW,CAAC,gBAAgB,SAAS,aAAa,EAChE,QAAQ,EAAE,iBAAiB,GAC1B,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,CAwB/C"}

package/lib/hooks.js

@@ -59,15 +59,40 @@ __export(exports, {
   useFragment: () => useFragment,
   useLazyLoadQuery: () => useLazyLoadQuery,
   useMutation: () => useMutation,
+  usePaginationFragment: () => usePaginationFragment,
+  useRefetchableFragment: () => useRefetchableFragment,
   useSubscription: () => useSubscription
 });
 var import_invariant = __toModule(require("invariant"));
 var import_client = __toModule(require("@apollo/client"));
+var import_compiledHooks = __toModule(require("./storeObservation/compiledHooks"));
+var import_convertFetchPolicy = __toModule(require("./convertFetchPolicy"));
 function useLazyLoadQuery(query, variables, options) {
-  return (0, import_client.useQuery)(query, __objSpread({variables}, options));
+  const apolloOptions = options && __objSpread(__objSpread({}, options), {
+    fetchPolicy: (0, import_convertFetchPolicy.convertFetchPolicy)(options.fetchPolicy)
+  });
+  if (query.watchQueryDocument) {
+    return (0, import_compiledHooks.useCompiledLazyLoadQuery)(query, __objSpread({
+      variables
+    }, apolloOptions));
+  } else {
+    return (0, import_client.useQuery)(query, __objSpread({variables}, apolloOptions));
+  }
+}
+function useFragment(fragmentInput, fragmentRef) {
+  if (fragmentInput.watchQueryDocument) {
+    return (0, import_compiledHooks.useCompiledFragment)(fragmentInput, fragmentRef);
+  } else {
+    return fragmentRef;
+  }
+}
+function useRefetchableFragment(fragmentInput, fragmentRef) {
+  (0, import_invariant.default)(!!fragmentInput.watchQueryDocument, "useRefetchableFragment is only supported at this time when using compilation");
+  return (0, import_compiledHooks.useCompiledRefetchableFragment)(fragmentInput, fragmentRef);
 }
-function useFragment(_fragmentInput, fragmentRef) {
-  return fragmentRef;
+function usePaginationFragment(fragmentInput, fragmentRef) {
+  (0, import_invariant.default)(!!fragmentInput.watchQueryDocument, "usePaginationFragment is only supported at this time when using compilation");
+  return (0, import_compiledHooks.useCompiledPaginationFragment)(fragmentInput, fragmentRef);
 }
 function useSubscription(config) {
   const {error} = (0, import_client.useSubscription)(config.subscription, {

package/lib/hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/hooks.ts"],
+  "sourcesContent": ["import { DocumentNode } from \"graphql\";\nimport invariant from \"invariant\";\nimport {\n  useSubscription as useApolloSubscription,\n  useQuery as useApolloQuery,\n  useMutation as useApolloMutation,\n} from \"@apollo/client\";\n\nimport {\n  FetchPolicy,\n  GraphQLTaggedNode,\n  KeyType,\n  KeyTypeData,\n  OperationType,\n} from \"./types\";\nimport {\n  RefetchFn,\n  PaginationFn,\n  useCompiledLazyLoadQuery,\n  useCompiledFragment,\n  useCompiledRefetchableFragment,\n  useCompiledPaginationFragment,\n} from \"./storeObservation/compiledHooks\";\nimport { convertFetchPolicy } from \"./convertFetchPolicy\";\n\n/**\n * Executes a GraphQL query.\n *\n * This hook is called 'lazy' as it is used to fetch a GraphQL query _during_ render. This hook can trigger multiple\n * round trips, one for loading and one for resolving.\n *\n * @see {useFragment} This function largely follows the documentation of `useFragment`, except that this is a root of a\n *                    GraphQL operation and thus does not take in any props such as opaque fragment references.\n *\n * @example\n ```typescript\n import { graphql, useLazyLoadQuery } from \"@nova-facade/react-graphql\";\n import { SomeReactComponent, fragment as SomeReactComponent_someGraphQLType } from \"./SomeReactComponent\";\n import { SomeRootReactComponentQuery } from \"./__generated__/SomeRootReactComponentQuery.graphql\";\n\n const query = graphql`\n   query SomeRootReactComponentQuery {\n     someGraphQLType {\n       ...SomeReactComponent_someGraphQLType\n     }\n   }\n   ${SomeReactComponent_someGraphQLType}\n `;\n\n export const SomeRootReactComponent: React.FC = () => {\n   const result = useLazyLoadQuery<SomeRootReactComponentQuery>(query);\n   if (result.error) {\n     throw result.error;\n   } else if (!result.data) {\n     // Loading\n     return null;\n   }\n\n   return (\n     <SomeReactComponent someGraphQLType={result.data.someGraphQLType} />\n   );\n };\n ```\n *\n * @param query The query operation to perform.\n * @param variables Object containing the variable values to fetch the query. These variables need to match GraphQL\n *                  variables declared inside the query.\n * @param options Options passed on to the underlying implementation.\n * @returns An object with either an error, the result data, or neither while loading.\n */\nexport function useLazyLoadQuery<TQuery extends OperationType>(\n  query: GraphQLTaggedNode,\n  variables: TQuery[\"variables\"],\n  options?: { fetchPolicy?: FetchPolicy }\n): { error?: Error; data?: TQuery[\"response\"] } {\n  const apolloOptions = options && {\n    ...options,\n    fetchPolicy: convertFetchPolicy(options.fetchPolicy),\n  };\n  if (query.watchQueryDocument) {\n    return useCompiledLazyLoadQuery(query as any, {\n      variables,\n      ...apolloOptions,\n    });\n  } else {\n    return useApolloQuery(query, { variables, ...apolloOptions });\n  }\n}\n\n/**\n * A first-class way for an individual component to express its direct data requirements using GraphQL. The fragment\n * should select all the fields that the component directly uses in its rendering or needs to pass to external\n * functions. It should *not* select data that its children need, unless those children are intended to remain their\n * pure React props as data inputs.\n *\n * For children that *do* have their own data requirements expressed using GraphQL, the fragment should ensure to\n * spread in the child's fragment.\n *\n * For each fragment defined using the `graphql` tagged template function, the Nova graphql-compiler will emit\n * TypeScript typings that correspond to the selected fields and referenced child component fragments. These typings\n * live in files in the sibling `./__generated__/` directory and are called after the fragment name. The compiler will\n * enforce some constraints about the fragment name, such that it starts with the name of the file it is defined in\n * (i.e. the name of the component) and ends with the name of the fragment reference prop that this component takes in\n * (which typically will be named after the GraphQL type that the fragment is defined on).\n *\n * The typing that has a `$key` suffix is meant to be used for the opaque fragment reference prop, whereas the typing\n * without a suffix describes the actual data and is only meant for usage internally to the file. When the opaque\n * fragment reference prop is passed to a `useFragment` call, the returned data will be unmasked and be typed according\n * to the typing without a suffix. As such, the unmasked typing is only ever needed when extracting pieces of the\n * component to the file scope. For functions extracted to different files, however, you should type those separately\n * and *not* use the emitted typings.\n *\n * @example\n ```typescript\n import { graphql, useFragment } from \"@nova-facade/react-graphql\";\n import { SomeChildReactComponent, fragment as SomeChildReactComponent_someGraphQLType } from \"./SomeChildReactComponent\";\n import { SomeReactComponent_someGraphQLType$key } from \"./__generated__/SomeReactComponent_someGraphQLType.graphql\";\n\n export const fragment = graphql`\n   fragment SomeReactComponent_someGraphQLType on SomeGraphQLType {\n     someDataThatThisComponentNeeds\n     ...SomeChildReactComponent_someGraphQLType\n   }\n   ${SomeChildReactComponent_someGraphQLType}\n `;\n\n export interface SomeReactComponentProps {\n   someGraphQLType: SomeReactComponent_someGraphQLType$key;\n }\n\n export const SomeReactComponent: React.FunctionComponent<SomeReactComponentProps> = props => {\n   const someGraphQLType = useFragment(fragment, props.someGraphQLType);\n   return (\n     <div>\n       <span>{someGraphQLType.someDataThatThisComponentNeeds}</span>\n       <SomeChildReactComponent someGraphQLType={someGraphQLType} />\n     </div>\n   );\n }\n ```\n *\n * @note For now, the fragment objects should be exported such that parent's can interpolate them into their own\n *       GraphQL documents. This may change in the future when/if we entirely switch to static compilation and will\n *       allow us to also move the usage of the graphql tagged template function inline at the `useFragment` call-site.\n *\n * @todo 1613321: Connect useFragment hooks directly to a GraphQL client store for targeted updates. Currently the data\n *       is simply unmasked at compile-time but otherwise passed through from the parent at run-time.\n *\n * @param _fragmentInput The GraphQL fragment document created using the `graphql` tagged template function.\n * @param fragmentRef The opaque fragment reference passed in by a parent component that has spread in this component's\n *                    fragment.\n * @returns The data corresponding to the field selections.\n */\nexport function useFragment<TKey extends KeyType>(\n  fragmentInput: GraphQLTaggedNode,\n  fragmentRef: TKey\n): KeyTypeData<TKey> {\n  if (fragmentInput.watchQueryDocument) {\n    return useCompiledFragment(fragmentInput, fragmentRef as any);\n  } else {\n    return fragmentRef as unknown;\n  }\n}\n\nexport function useRefetchableFragment<\n  TQuery extends OperationType,\n  TKey extends KeyType\n>(\n  fragmentInput: GraphQLTaggedNode,\n  fragmentRef: TKey\n): [data: KeyTypeData<TKey>, refetch: RefetchFn<TQuery[\"variables\"]>] {\n  invariant(\n    !!fragmentInput.watchQueryDocument,\n    \"useRefetchableFragment is only supported at this time when using compilation\"\n  );\n  return useCompiledRefetchableFragment(\n    fragmentInput as any,\n    fragmentRef as any\n  );\n}\n\nexport function usePaginationFragment<\n  TQuery extends OperationType,\n  TKey extends KeyType\n>(\n  fragmentInput: GraphQLTaggedNode,\n  fragmentRef: TKey\n): {\n  data: KeyTypeData<TKey>;\n  loadNext: PaginationFn;\n  loadPrevious: PaginationFn;\n  hasNext: boolean;\n  hasPrevious: boolean;\n  isLoadingNext: boolean;\n  isLoadingPrevious: boolean;\n  refetch: RefetchFn<TQuery[\"variables\"]>;\n} {\n  invariant(\n    !!fragmentInput.watchQueryDocument,\n    \"usePaginationFragment is only supported at this time when using compilation\"\n  );\n  return useCompiledPaginationFragment(\n    fragmentInput as any,\n    fragmentRef as any\n  );\n}\n\n// https://github.com/facebook/relay/blob/master/website/docs/api-reference/types/GraphQLSubscriptionConfig.md\ninterface GraphQLSubscriptionConfig<\n  TSubscriptionPayload extends OperationType\n> {\n  subscription: GraphQLTaggedNode;\n  variables: TSubscriptionPayload[\"variables\"];\n  /**\n   * Should response be nullable?\n   */\n  onNext?: (response: TSubscriptionPayload[\"response\"]) => void;\n  onError?: (error: Error) => void;\n}\n\nexport function useSubscription<TSubscriptionPayload extends OperationType>(\n  config: GraphQLSubscriptionConfig<TSubscriptionPayload>\n): void {\n  const { error } = useApolloSubscription(\n    // TODO: Right now we don't replace mutation documents with imported artefacts.\n    config.subscription as DocumentNode,\n    {\n      variables: config.variables,\n      onSubscriptionData: ({ subscriptionData }) => {\n        // Supposedly this never gets triggered for an error by design:\n        // https://github.com/apollographql/react-apollo/issues/3177#issuecomment-506758144\n        invariant(\n          !subscriptionData.error,\n          \"Did not expect to receive an error here\"\n        );\n        if (subscriptionData.data && config.onNext) {\n          config.onNext(subscriptionData.data);\n        }\n      },\n    }\n  );\n  if (error) {\n    if (config.onError) {\n      config.onError(error);\n    } else {\n      console.warn(\n        `An unhandled GraphQL subscription error occurred: ${error.message}`\n      );\n    }\n  }\n}\n\ninterface IMutationCommitterOptions<TMutationPayload extends OperationType> {\n  variables: TMutationPayload[\"variables\"];\n  optimisticResponse?: Partial<TMutationPayload[\"response\"]> | null;\n}\n\ntype MutationCommiter<TMutationPayload extends OperationType> = (\n  options: IMutationCommitterOptions<TMutationPayload>\n) => Promise<{ errors?: Error[]; data?: TMutationPayload[\"response\"] }>;\n\n/**\n * Declare use of a mutation within component. Returns an array of a function and loading state boolean.\n *\n * Returned function can be called to perform the actual mutation with provided variables.\n *\n * @param mutation Mutation document\n * @returns [commitMutationFn, isInFlight]\n *\n * commitMutationFn\n * @param options.variables map of variables to pass to mutation\n * @param options.optimisticResponse proposed response to apply to the store while mutation is in flight\n * @returns A Promise to an object with either errors or/and the result data\n * \n * Example\n ```\n\n const mutation = graphql`\n mutation SomeReactComponentMutation($newName: String!) {\n   someMutation(newName: $newName) {\n     __typeName\n     id\n     newName\n   }\n }\n `\n\n export const SomeReactComponent: React.FunctionComponent<SomeReactComponentProps> = props => {\n   const [commitMutation, isInFlight] = useMutation(mutation);\n   return (\n     <div>\n       <button onClick={() => commitMutation({\n         variables: {\n            newName: \"foo\"\n         },\n         optimisticResponse: {\n            someMutation: {\n              __typename: \"SomeMutationPayload\",\n              id: \"1\",\n              newName: \"foo\",\n            }\n         }\n       })} disabled={isInFlight}/>\n     </div>\n   );\n }\n ```\n */\nexport function useMutation<TMutationPayload extends OperationType>(\n  mutation: GraphQLTaggedNode\n): [MutationCommiter<TMutationPayload>, boolean] {\n  const [apolloUpdater, { loading: mutationLoading }] = useApolloMutation(\n    // TODO: Right now we don't replace mutation documents with imported artefacts.\n    mutation as DocumentNode\n  );\n\n  return [\n    async (options: IMutationCommitterOptions<TMutationPayload>) => {\n      const apolloResult = await apolloUpdater({\n        variables: options.variables || {},\n        optimisticResponse: options.optimisticResponse,\n      });\n      if (apolloResult.errors) {\n        return {\n          errors: Array.from(Object.values(apolloResult.errors)),\n          data: apolloResult.data,\n        };\n      }\n      return {\n        data: apolloResult.data,\n      };\n    },\n    mutationLoading,\n  ];\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAAsB;AACtB,oBAIO;AASP,2BAOO;AACP,gCAAmC;AA+C5B,0BACL,OACA,WACA,SAC8C;AAC9C,QAAM,gBAAgB,WAAW,4BAC5B,UAD4B;AAAA,IAE/B,aAAa,kDAAmB,QAAQ;AAAA;AAE1C,MAAI,MAAM,oBAAoB;AAC5B,WAAO,mDAAyB,OAAc;AAAA,MAC5C;AAAA,OACG;AAAA,SAEA;AACL,WAAO,4BAAe,OAAO,aAAE,YAAc;AAAA;AAAA;AAoE1C,qBACL,eACA,aACmB;AACnB,MAAI,cAAc,oBAAoB;AACpC,WAAO,8CAAoB,eAAe;AAAA,SACrC;AACL,WAAO;AAAA;AAAA;AAIJ,gCAIL,eACA,aACoE;AACpE,gCACE,CAAC,CAAC,cAAc,oBAChB;AAEF,SAAO,yDACL,eACA;AAAA;AAIG,+BAIL,eACA,aAUA;AACA,gCACE,CAAC,CAAC,cAAc,oBAChB;AAEF,SAAO,wDACL,eACA;AAAA;AAiBG,yBACL,QACM;AACN,QAAM,CAAE,SAAU,mCAEhB,OAAO,cACP;AAAA,IACE,WAAW,OAAO;AAAA,IAClB,oBAAoB,CAAC,CAAE,sBAAuB;AAG5C,oCACE,CAAC,iBAAiB,OAClB;AAEF,UAAI,iBAAiB,QAAQ,OAAO,QAAQ;AAC1C,eAAO,OAAO,iBAAiB;AAAA;AAAA;AAAA;AAKvC,MAAI,OAAO;AACT,QAAI,OAAO,SAAS;AAClB,aAAO,QAAQ;AAAA,WACV;AACL,cAAQ,KACN,qDAAqD,MAAM;AAAA;AAAA;AAAA;AA8D5D,qBACL,UAC+C;AAC/C,QAAM,CAAC,eAAe,CAAE,SAAS,oBAAqB,+BAEpD;AAGF,SAAO;AAAA,IACL,CAAO,YAAyD;AAC9D,YAAM,eAAe,MAAM,cAAc;AAAA,QACvC,WAAW,QAAQ,aAAa;AAAA,QAChC,oBAAoB,QAAQ;AAAA;AAE9B,UAAI,aAAa,QAAQ;AACvB,eAAO;AAAA,UACL,QAAQ,MAAM,KAAK,OAAO,OAAO,aAAa;AAAA,UAC9C,MAAM,aAAa;AAAA;AAAA;AAGvB,aAAO;AAAA,QACL,MAAM,aAAa;AAAA;AAAA;AAAA,IAGvB;AAAA;AAAA;",
+  "names": []
+}

package/lib/hooks.mjs

@@ -42,11 +42,39 @@ import {
   useQuery as useApolloQuery,
   useMutation as useApolloMutation
 } from "@apollo/client";
+import {
+  useCompiledLazyLoadQuery,
+  useCompiledFragment,
+  useCompiledRefetchableFragment,
+  useCompiledPaginationFragment
+} from "./storeObservation/compiledHooks.mjs";
+import {convertFetchPolicy} from "./convertFetchPolicy.mjs";
 function useLazyLoadQuery(query, variables, options) {
-  return useApolloQuery(query, __objSpread({variables}, options));
+  const apolloOptions = options && __objSpread(__objSpread({}, options), {
+    fetchPolicy: convertFetchPolicy(options.fetchPolicy)
+  });
+  if (query.watchQueryDocument) {
+    return useCompiledLazyLoadQuery(query, __objSpread({
+      variables
+    }, apolloOptions));
+  } else {
+    return useApolloQuery(query, __objSpread({variables}, apolloOptions));
+  }
+}
+function useFragment(fragmentInput, fragmentRef) {
+  if (fragmentInput.watchQueryDocument) {
+    return useCompiledFragment(fragmentInput, fragmentRef);
+  } else {
+    return fragmentRef;
+  }
+}
+function useRefetchableFragment(fragmentInput, fragmentRef) {
+  invariant(!!fragmentInput.watchQueryDocument, "useRefetchableFragment is only supported at this time when using compilation");
+  return useCompiledRefetchableFragment(fragmentInput, fragmentRef);
 }
-function useFragment(_fragmentInput, fragmentRef) {
-  return fragmentRef;
+function usePaginationFragment(fragmentInput, fragmentRef) {
+  invariant(!!fragmentInput.watchQueryDocument, "usePaginationFragment is only supported at this time when using compilation");
+  return useCompiledPaginationFragment(fragmentInput, fragmentRef);
 }
 function useSubscription(config) {
   const {error} = useApolloSubscription(config.subscription, {
@@ -91,5 +119,7 @@ export {
   useFragment,
   useLazyLoadQuery,
   useMutation,
+  usePaginationFragment,
+  useRefetchableFragment,
   useSubscription
 };

package/lib/hooks.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/hooks.ts"],
+  "sourcesContent": ["import { DocumentNode } from \"graphql\";\nimport invariant from \"invariant\";\nimport {\n  useSubscription as useApolloSubscription,\n  useQuery as useApolloQuery,\n  useMutation as useApolloMutation,\n} from \"@apollo/client\";\n\nimport {\n  FetchPolicy,\n  GraphQLTaggedNode,\n  KeyType,\n  KeyTypeData,\n  OperationType,\n} from \"./types\";\nimport {\n  RefetchFn,\n  PaginationFn,\n  useCompiledLazyLoadQuery,\n  useCompiledFragment,\n  useCompiledRefetchableFragment,\n  useCompiledPaginationFragment,\n} from \"./storeObservation/compiledHooks\";\nimport { convertFetchPolicy } from \"./convertFetchPolicy\";\n\n/**\n * Executes a GraphQL query.\n *\n * This hook is called 'lazy' as it is used to fetch a GraphQL query _during_ render. This hook can trigger multiple\n * round trips, one for loading and one for resolving.\n *\n * @see {useFragment} This function largely follows the documentation of `useFragment`, except that this is a root of a\n *                    GraphQL operation and thus does not take in any props such as opaque fragment references.\n *\n * @example\n ```typescript\n import { graphql, useLazyLoadQuery } from \"@nova-facade/react-graphql\";\n import { SomeReactComponent, fragment as SomeReactComponent_someGraphQLType } from \"./SomeReactComponent\";\n import { SomeRootReactComponentQuery } from \"./__generated__/SomeRootReactComponentQuery.graphql\";\n\n const query = graphql`\n   query SomeRootReactComponentQuery {\n     someGraphQLType {\n       ...SomeReactComponent_someGraphQLType\n     }\n   }\n   ${SomeReactComponent_someGraphQLType}\n `;\n\n export const SomeRootReactComponent: React.FC = () => {\n   const result = useLazyLoadQuery<SomeRootReactComponentQuery>(query);\n   if (result.error) {\n     throw result.error;\n   } else if (!result.data) {\n     // Loading\n     return null;\n   }\n\n   return (\n     <SomeReactComponent someGraphQLType={result.data.someGraphQLType} />\n   );\n };\n ```\n *\n * @param query The query operation to perform.\n * @param variables Object containing the variable values to fetch the query. These variables need to match GraphQL\n *                  variables declared inside the query.\n * @param options Options passed on to the underlying implementation.\n * @returns An object with either an error, the result data, or neither while loading.\n */\nexport function useLazyLoadQuery<TQuery extends OperationType>(\n  query: GraphQLTaggedNode,\n  variables: TQuery[\"variables\"],\n  options?: { fetchPolicy?: FetchPolicy }\n): { error?: Error; data?: TQuery[\"response\"] } {\n  const apolloOptions = options && {\n    ...options,\n    fetchPolicy: convertFetchPolicy(options.fetchPolicy),\n  };\n  if (query.watchQueryDocument) {\n    return useCompiledLazyLoadQuery(query as any, {\n      variables,\n      ...apolloOptions,\n    });\n  } else {\n    return useApolloQuery(query, { variables, ...apolloOptions });\n  }\n}\n\n/**\n * A first-class way for an individual component to express its direct data requirements using GraphQL. The fragment\n * should select all the fields that the component directly uses in its rendering or needs to pass to external\n * functions. It should *not* select data that its children need, unless those children are intended to remain their\n * pure React props as data inputs.\n *\n * For children that *do* have their own data requirements expressed using GraphQL, the fragment should ensure to\n * spread in the child's fragment.\n *\n * For each fragment defined using the `graphql` tagged template function, the Nova graphql-compiler will emit\n * TypeScript typings that correspond to the selected fields and referenced child component fragments. These typings\n * live in files in the sibling `./__generated__/` directory and are called after the fragment name. The compiler will\n * enforce some constraints about the fragment name, such that it starts with the name of the file it is defined in\n * (i.e. the name of the component) and ends with the name of the fragment reference prop that this component takes in\n * (which typically will be named after the GraphQL type that the fragment is defined on).\n *\n * The typing that has a `$key` suffix is meant to be used for the opaque fragment reference prop, whereas the typing\n * without a suffix describes the actual data and is only meant for usage internally to the file. When the opaque\n * fragment reference prop is passed to a `useFragment` call, the returned data will be unmasked and be typed according\n * to the typing without a suffix. As such, the unmasked typing is only ever needed when extracting pieces of the\n * component to the file scope. For functions extracted to different files, however, you should type those separately\n * and *not* use the emitted typings.\n *\n * @example\n ```typescript\n import { graphql, useFragment } from \"@nova-facade/react-graphql\";\n import { SomeChildReactComponent, fragment as SomeChildReactComponent_someGraphQLType } from \"./SomeChildReactComponent\";\n import { SomeReactComponent_someGraphQLType$key } from \"./__generated__/SomeReactComponent_someGraphQLType.graphql\";\n\n export const fragment = graphql`\n   fragment SomeReactComponent_someGraphQLType on SomeGraphQLType {\n     someDataThatThisComponentNeeds\n     ...SomeChildReactComponent_someGraphQLType\n   }\n   ${SomeChildReactComponent_someGraphQLType}\n `;\n\n export interface SomeReactComponentProps {\n   someGraphQLType: SomeReactComponent_someGraphQLType$key;\n }\n\n export const SomeReactComponent: React.FunctionComponent<SomeReactComponentProps> = props => {\n   const someGraphQLType = useFragment(fragment, props.someGraphQLType);\n   return (\n     <div>\n       <span>{someGraphQLType.someDataThatThisComponentNeeds}</span>\n       <SomeChildReactComponent someGraphQLType={someGraphQLType} />\n     </div>\n   );\n }\n ```\n *\n * @note For now, the fragment objects should be exported such that parent's can interpolate them into their own\n *       GraphQL documents. This may change in the future when/if we entirely switch to static compilation and will\n *       allow us to also move the usage of the graphql tagged template function inline at the `useFragment` call-site.\n *\n * @todo 1613321: Connect useFragment hooks directly to a GraphQL client store for targeted updates. Currently the data\n *       is simply unmasked at compile-time but otherwise passed through from the parent at run-time.\n *\n * @param _fragmentInput The GraphQL fragment document created using the `graphql` tagged template function.\n * @param fragmentRef The opaque fragment reference passed in by a parent component that has spread in this component's\n *                    fragment.\n * @returns The data corresponding to the field selections.\n */\nexport function useFragment<TKey extends KeyType>(\n  fragmentInput: GraphQLTaggedNode,\n  fragmentRef: TKey\n): KeyTypeData<TKey> {\n  if (fragmentInput.watchQueryDocument) {\n    return useCompiledFragment(fragmentInput, fragmentRef as any);\n  } else {\n    return fragmentRef as unknown;\n  }\n}\n\nexport function useRefetchableFragment<\n  TQuery extends OperationType,\n  TKey extends KeyType\n>(\n  fragmentInput: GraphQLTaggedNode,\n  fragmentRef: TKey\n): [data: KeyTypeData<TKey>, refetch: RefetchFn<TQuery[\"variables\"]>] {\n  invariant(\n    !!fragmentInput.watchQueryDocument,\n    \"useRefetchableFragment is only supported at this time when using compilation\"\n  );\n  return useCompiledRefetchableFragment(\n    fragmentInput as any,\n    fragmentRef as any\n  );\n}\n\nexport function usePaginationFragment<\n  TQuery extends OperationType,\n  TKey extends KeyType\n>(\n  fragmentInput: GraphQLTaggedNode,\n  fragmentRef: TKey\n): {\n  data: KeyTypeData<TKey>;\n  loadNext: PaginationFn;\n  loadPrevious: PaginationFn;\n  hasNext: boolean;\n  hasPrevious: boolean;\n  isLoadingNext: boolean;\n  isLoadingPrevious: boolean;\n  refetch: RefetchFn<TQuery[\"variables\"]>;\n} {\n  invariant(\n    !!fragmentInput.watchQueryDocument,\n    \"usePaginationFragment is only supported at this time when using compilation\"\n  );\n  return useCompiledPaginationFragment(\n    fragmentInput as any,\n    fragmentRef as any\n  );\n}\n\n// https://github.com/facebook/relay/blob/master/website/docs/api-reference/types/GraphQLSubscriptionConfig.md\ninterface GraphQLSubscriptionConfig<\n  TSubscriptionPayload extends OperationType\n> {\n  subscription: GraphQLTaggedNode;\n  variables: TSubscriptionPayload[\"variables\"];\n  /**\n   * Should response be nullable?\n   */\n  onNext?: (response: TSubscriptionPayload[\"response\"]) => void;\n  onError?: (error: Error) => void;\n}\n\nexport function useSubscription<TSubscriptionPayload extends OperationType>(\n  config: GraphQLSubscriptionConfig<TSubscriptionPayload>\n): void {\n  const { error } = useApolloSubscription(\n    // TODO: Right now we don't replace mutation documents with imported artefacts.\n    config.subscription as DocumentNode,\n    {\n      variables: config.variables,\n      onSubscriptionData: ({ subscriptionData }) => {\n        // Supposedly this never gets triggered for an error by design:\n        // https://github.com/apollographql/react-apollo/issues/3177#issuecomment-506758144\n        invariant(\n          !subscriptionData.error,\n          \"Did not expect to receive an error here\"\n        );\n        if (subscriptionData.data && config.onNext) {\n          config.onNext(subscriptionData.data);\n        }\n      },\n    }\n  );\n  if (error) {\n    if (config.onError) {\n      config.onError(error);\n    } else {\n      console.warn(\n        `An unhandled GraphQL subscription error occurred: ${error.message}`\n      );\n    }\n  }\n}\n\ninterface IMutationCommitterOptions<TMutationPayload extends OperationType> {\n  variables: TMutationPayload[\"variables\"];\n  optimisticResponse?: Partial<TMutationPayload[\"response\"]> | null;\n}\n\ntype MutationCommiter<TMutationPayload extends OperationType> = (\n  options: IMutationCommitterOptions<TMutationPayload>\n) => Promise<{ errors?: Error[]; data?: TMutationPayload[\"response\"] }>;\n\n/**\n * Declare use of a mutation within component. Returns an array of a function and loading state boolean.\n *\n * Returned function can be called to perform the actual mutation with provided variables.\n *\n * @param mutation Mutation document\n * @returns [commitMutationFn, isInFlight]\n *\n * commitMutationFn\n * @param options.variables map of variables to pass to mutation\n * @param options.optimisticResponse proposed response to apply to the store while mutation is in flight\n * @returns A Promise to an object with either errors or/and the result data\n * \n * Example\n ```\n\n const mutation = graphql`\n mutation SomeReactComponentMutation($newName: String!) {\n   someMutation(newName: $newName) {\n     __typeName\n     id\n     newName\n   }\n }\n `\n\n export const SomeReactComponent: React.FunctionComponent<SomeReactComponentProps> = props => {\n   const [commitMutation, isInFlight] = useMutation(mutation);\n   return (\n     <div>\n       <button onClick={() => commitMutation({\n         variables: {\n            newName: \"foo\"\n         },\n         optimisticResponse: {\n            someMutation: {\n              __typename: \"SomeMutationPayload\",\n              id: \"1\",\n              newName: \"foo\",\n            }\n         }\n       })} disabled={isInFlight}/>\n     </div>\n   );\n }\n ```\n */\nexport function useMutation<TMutationPayload extends OperationType>(\n  mutation: GraphQLTaggedNode\n): [MutationCommiter<TMutationPayload>, boolean] {\n  const [apolloUpdater, { loading: mutationLoading }] = useApolloMutation(\n    // TODO: Right now we don't replace mutation documents with imported artefacts.\n    mutation as DocumentNode\n  );\n\n  return [\n    async (options: IMutationCommitterOptions<TMutationPayload>) => {\n      const apolloResult = await apolloUpdater({\n        variables: options.variables || {},\n        optimisticResponse: options.optimisticResponse,\n      });\n      if (apolloResult.errors) {\n        return {\n          errors: Array.from(Object.values(apolloResult.errors)),\n          data: apolloResult.data,\n        };\n      }\n      return {\n        data: apolloResult.data,\n      };\n    },\n    mutationLoading,\n  ];\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AA+CO,0BACL,OACA,WACA,SAC8C;AAC9C,QAAM,gBAAgB,WAAW,4BAC5B,UAD4B;AAAA,IAE/B,aAAa,mBAAmB,QAAQ;AAAA;AAE1C,MAAI,MAAM,oBAAoB;AAC5B,WAAO,yBAAyB,OAAc;AAAA,MAC5C;AAAA,OACG;AAAA,SAEA;AACL,WAAO,eAAe,OAAO,aAAE,YAAc;AAAA;AAAA;AAoE1C,qBACL,eACA,aACmB;AACnB,MAAI,cAAc,oBAAoB;AACpC,WAAO,oBAAoB,eAAe;AAAA,SACrC;AACL,WAAO;AAAA;AAAA;AAIJ,gCAIL,eACA,aACoE;AACpE,YACE,CAAC,CAAC,cAAc,oBAChB;AAEF,SAAO,+BACL,eACA;AAAA;AAIG,+BAIL,eACA,aAUA;AACA,YACE,CAAC,CAAC,cAAc,oBAChB;AAEF,SAAO,8BACL,eACA;AAAA;AAiBG,yBACL,QACM;AACN,QAAM,CAAE,SAAU,sBAEhB,OAAO,cACP;AAAA,IACE,WAAW,OAAO;AAAA,IAClB,oBAAoB,CAAC,CAAE,sBAAuB;AAG5C,gBACE,CAAC,iBAAiB,OAClB;AAEF,UAAI,iBAAiB,QAAQ,OAAO,QAAQ;AAC1C,eAAO,OAAO,iBAAiB;AAAA;AAAA;AAAA;AAKvC,MAAI,OAAO;AACT,QAAI,OAAO,SAAS;AAClB,aAAO,QAAQ;AAAA,WACV;AACL,cAAQ,KACN,qDAAqD,MAAM;AAAA;AAAA;AAAA;AA8D5D,qBACL,UAC+C;AAC/C,QAAM,CAAC,eAAe,CAAE,SAAS,oBAAqB,kBAEpD;AAGF,SAAO;AAAA,IACL,CAAO,YAAyD;AAC9D,YAAM,eAAe,MAAM,cAAc;AAAA,QACvC,WAAW,QAAQ,aAAa;AAAA,QAChC,oBAAoB,QAAQ;AAAA;AAE9B,UAAI,aAAa,QAAQ;AACvB,eAAO;AAAA,UACL,QAAQ,MAAM,KAAK,OAAO,OAAO,aAAa;AAAA,UAC9C,MAAM,aAAa;AAAA;AAAA;AAGvB,aAAO;AAAA,QACL,MAAM,aAAa;AAAA;AAAA;AAAA,IAGvB;AAAA;AAAA;",
+  "names": []
+}

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./hooks";
 export * from "./types";
+export * from "./storeObservation";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC"}

package/lib/index.js

@@ -19,3 +19,4 @@ var __toModule = (module2) => {
 __markAsModule(exports);
 __reExport(exports, __toModule(require("./hooks")));
 __reExport(exports, __toModule(require("./types")));
+__reExport(exports, __toModule(require("./storeObservation")));

package/lib/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export * from \"./hooks\";\nexport * from \"./types\";\nexport * from \"./storeObservation\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA,oBAAc;AACd,oBAAc;AACd,oBAAc;",
+  "names": []
+}

package/lib/index.mjs

@@ -1,3 +1,4 @@
 // src/index.ts
 export * from "./hooks.mjs";
 export * from "./types.mjs";
+export * from "./storeObservation.mjs";

package/lib/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export * from \"./hooks\";\nexport * from \"./types\";\nexport * from \"./storeObservation\";\n"],
+  "mappings": ";AAAA;AACA;AACA;",
+  "names": []
+}

package/lib/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment.graphql.d.ts

@@ -0,0 +1,18 @@
+import { FragmentRefs } from "@graphitation/apollo-react-relay-duct-tape";
+export declare type compiledHooks_BackwardPaginationFragment = {
+    readonly messages: {
+        readonly edges: ReadonlyArray<{
+            readonly node: {
+                readonly text: string;
+            };
+        }>;
+    };
+    readonly id: string;
+    readonly " $refType": "compiledHooks_BackwardPaginationFragment";
+};
+export declare type compiledHooks_BackwardPaginationFragment$data = compiledHooks_BackwardPaginationFragment;
+export declare type compiledHooks_BackwardPaginationFragment$key = {
+    readonly " $data"?: compiledHooks_BackwardPaginationFragment$data;
+    readonly " $fragmentRefs": FragmentRefs<"compiledHooks_BackwardPaginationFragment">;
+};
+//# sourceMappingURL=compiledHooks_BackwardPaginationFragment.graphql.d.ts.map

package/lib/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compiledHooks_BackwardPaginationFragment.graphql.d.ts","sourceRoot":"","sources":["../../../src/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment.graphql.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,oBAAY,wCAAwC,GAAG;IACnD,QAAQ,CAAC,QAAQ,EAAE;QACf,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC;YAC1B,QAAQ,CAAC,IAAI,EAAE;gBACX,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;aACzB,CAAC;SACL,CAAC,CAAC;KACN,CAAC;IACF,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,WAAW,EAAE,0CAA0C,CAAC;CACpE,CAAC;AACF,oBAAY,6CAA6C,GAAG,wCAAwC,CAAC;AACrG,oBAAY,4CAA4C,GAAG;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,6CAA6C,CAAC;IAClE,QAAQ,CAAC,gBAAgB,EAAE,YAAY,CAAC,0CAA0C,CAAC,CAAC;CACvF,CAAC"}

package/lib/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment.graphql.js

@@ -0,0 +1,4 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
+__markAsModule(exports);
+;

package/lib/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment.graphql.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment.graphql.ts"],
+  "sourcesContent": ["/* tslint:disable */\n/* eslint-disable */\n// @ts-nocheck\n;\n\nimport { FragmentRefs } from \"@graphitation/apollo-react-relay-duct-tape\";\nexport type compiledHooks_BackwardPaginationFragment = {\n    readonly messages: {\n        readonly edges: ReadonlyArray<{\n            readonly node: {\n                readonly text: string;\n            };\n        }>;\n    };\n    readonly id: string;\n    readonly \" $refType\": \"compiledHooks_BackwardPaginationFragment\";\n};\nexport type compiledHooks_BackwardPaginationFragment$data = compiledHooks_BackwardPaginationFragment;\nexport type compiledHooks_BackwardPaginationFragment$key = {\n    readonly \" $data\"?: compiledHooks_BackwardPaginationFragment$data;\n    readonly \" $fragmentRefs\": FragmentRefs<\"compiledHooks_BackwardPaginationFragment\">;\n};\n"],
+  "mappings": ";;AAAA;AAGA;",
+  "names": []
+}

package/lib/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment.graphql.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/lib/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment_PaginationQuery.graphql.d.ts

@@ -0,0 +1,17 @@
+import { FragmentRefs } from "@graphitation/apollo-react-relay-duct-tape";
+export declare type compiledHooks_BackwardPaginationFragment_PaginationQueryVariables = {
+    messagesBackwardCount: number;
+    messagesBeforeCursor: string;
+    id: string;
+};
+export declare type compiledHooks_BackwardPaginationFragment_PaginationQueryResponse = {
+    readonly node: {
+        readonly " $fragmentRefs": FragmentRefs<"compiledHooks_BackwardPaginationFragment">;
+    } | null;
+};
+export declare type compiledHooks_BackwardPaginationFragment_PaginationQuery = {
+    readonly response: compiledHooks_BackwardPaginationFragment_PaginationQueryResponse;
+    readonly variables: compiledHooks_BackwardPaginationFragment_PaginationQueryVariables;
+};
+export declare const documents: import("relay-compiler-language-graphitation").CompiledArtefactModule;
+//# sourceMappingURL=compiledHooks_BackwardPaginationFragment_PaginationQuery.graphql.d.ts.map

package/lib/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment_PaginationQuery.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compiledHooks_BackwardPaginationFragment_PaginationQuery.graphql.d.ts","sourceRoot":"","sources":["../../../src/storeObservation/__generated__/compiledHooks_BackwardPaginationFragment_PaginationQuery.graphql.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,oBAAY,iEAAiE,GAAG;IAC5E,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,EAAE,EAAE,MAAM,CAAC;CACd,CAAC;AACF,oBAAY,gEAAgE,GAAG;IAC3E,QAAQ,CAAC,IAAI,EAAE;QACX,QAAQ,CAAC,gBAAgB,EAAE,YAAY,CAAC,0CAA0C,CAAC,CAAC;KACvF,GAAG,IAAI,CAAC;CACZ,CAAC;AACF,oBAAY,wDAAwD,GAAG;IACnE,QAAQ,CAAC,QAAQ,EAAE,gEAAgE,CAAC;IACpF,QAAQ,CAAC,SAAS,EAAE,iEAAiE,CAAC;CACzF,CAAC;AA8DF,eAAO,MAAM,SAAS,EAAE,OAAO,sCAAsC,EAAE,sBAkoBtE,CAAC"}