@graphitation/apollo-react-relay-duct-tape 0.7.3 → 1.0.0-alpha.1

package/lib/storeObservation/compiledHooks.test.mjs

@@ -0,0 +1,947 @@
+var __defProp = Object.defineProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __objSpread = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve2, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/storeObservation/compiledHooks.test.tsx
+import React from "react";
+import {ApolloProvider} from "@apollo/client";
+import {
+  act,
+  create as createTestRenderer
+} from "react-test-renderer";
+import {buildSchema} from "graphql";
+import {graphql} from "@graphitation/graphql-js-tag";
+import {
+  createMockClient
+} from "@graphitation/apollo-mock-client";
+import {
+  generate
+} from "@graphitation/graphql-js-operation-payload-generator";
+import {
+  readFileSync
+} from "fs";
+import {
+  resolve
+} from "path";
+import {
+  useCompiledFragment,
+  useCompiledLazyLoadQuery,
+  useCompiledPaginationFragment,
+  useCompiledRefetchableFragment
+} from "./compiledHooks.mjs";
+import {typePolicies} from "./typePolicies.mjs";
+import {documents as compiledHooks_Root_executionQuery_documents} from "./__generated__/compiledHooks_Root_executionQuery.graphql.mjs";
+import {documents as compiledHooks_ChildFragment_documents} from "./__generated__/compiledHooks_ChildWatchNodeQuery.graphql.mjs";
+import {documents as compiledHooks_RefetchableFragment_documents} from "./__generated__/compiledHooks_RefetchableFragment_RefetchQuery.graphql.mjs";
+import {documents as compiledHooks_QueryTypeFragment_documents} from "./__generated__/compiledHooks_QueryTypeWatchNodeQuery.graphql.mjs";
+import {documents as compiledHooks_ForwardPaginationFragment_documents} from "./__generated__/compiledHooks_ForwardPaginationFragment_PaginationQuery.graphql.mjs";
+import {documents as compiledHooks_BackwardPaginationFragment_documents} from "./__generated__/compiledHooks_BackwardPaginationFragment_PaginationQuery.graphql.mjs";
+var schema = buildSchema(readFileSync(resolve(__dirname, "../__tests__/schema.graphql"), "utf8"));
+var Child_fragment = graphql`
+  fragment compiledHooks_ChildFragment on User {
+    petName
+  }
+`;
+var Refetchable_fragment = graphql`
+  fragment compiledHooks_RefetchableFragment on User
+  @refetchable(queryName: "compiledHooks_RefetchableFragment_RefetchQuery") {
+    petName
+    avatarUrl(size: $avatarSize)
+  }
+`;
+var QueryType_fragment = graphql`
+  fragment compiledHooks_QueryTypeFragment on Query {
+    nonNode {
+      id
+    }
+  }
+`;
+var ForwardPagination_fragment = graphql`
+  fragment compiledHooks_ForwardPaginationFragment on User
+  @refetchable(
+    queryName: "compiledHooks_ForwardPaginationFragment_PaginationQuery"
+  )
+  @argumentDefinitions(
+    conversationsForwardCount: { type: "Int!", defaultValue: 1 }
+    conversationsAfterCursor: { type: "String!", defaultValue: "" }
+  ) {
+    petName
+    avatarUrl(size: $avatarSize)
+    conversations(
+      first: $conversationsForwardCount
+      after: $conversationsAfterCursor
+    ) @connection(key: "compiledHooks_user_conversations") {
+      edges {
+        node {
+          title
+          ...compiledHooks_BackwardPaginationFragment
+        }
+      }
+    }
+  }
+`;
+var BackwardPagination_fragment = graphql`
+  fragment compiledHooks_BackwardPaginationFragment on Conversation
+  @refetchable(
+    queryName: "compiledHooks_BackwardPaginationFragment_PaginationQuery"
+  ) {
+    messages(last: $messagesBackwardCount, before: $messagesBeforeCursor)
+      @connection(key: "compiledHooks_conversation_messages") {
+      edges {
+        node {
+          text
+        }
+      }
+    }
+  }
+`;
+var Root_executionQueryDocument = graphql`
+  query compiledHooks_Root_executionQuery(
+    $userId: Int!
+    $avatarSize: Int = 21
+    $messagesBackwardCount: Int!
+    $messagesBeforeCursor: String!
+  ) {
+    user(id: $userId) {
+      name
+      ...compiledHooks_ChildFragment
+      ...compiledHooks_RefetchableFragment
+      ...compiledHooks_ForwardPaginationFragment
+    }
+    ...compiledHooks_QueryTypeFragment
+  }
+`;
+describe("compiledHooks", () => {
+  let client;
+  let testRenderer;
+  let useFragmentResult;
+  let useRefetchableFragmentResult;
+  let forwardUsePaginationFragmentResult;
+  let backwardUsePaginationFragmentResult;
+  let useLazyLoadQueryResult = null;
+  let componentOnQueryTypeResult;
+  const ChildComponent = (props) => {
+    const result = useCompiledFragment(compiledHooks_ChildFragment_documents, props.user);
+    useFragmentResult.push(result);
+    return null;
+  };
+  const ChildRefetchableComponent = (props) => {
+    const result = useCompiledRefetchableFragment(compiledHooks_RefetchableFragment_documents, props.user);
+    useRefetchableFragmentResult.push(result);
+    return null;
+  };
+  const ComponentOnQueryType = (props) => {
+    const result = useCompiledFragment(compiledHooks_QueryTypeFragment_documents, props.query);
+    componentOnQueryTypeResult.push(result);
+    return null;
+  };
+  const ChildForwardPaginationComponent = (props) => {
+    const result = useCompiledPaginationFragment(compiledHooks_ForwardPaginationFragment_documents, props.user);
+    forwardUsePaginationFragmentResult.push(result);
+    return result.data.conversations.edges.map((edge, index) => {
+      return /* @__PURE__ */ React.createElement(ChildBackwardPaginationComponent, {
+        conversation: edge.node,
+        key: index
+      });
+    });
+  };
+  const ChildBackwardPaginationComponent = (props) => {
+    const result = useCompiledPaginationFragment(compiledHooks_BackwardPaginationFragment_documents, props.conversation);
+    backwardUsePaginationFragmentResult.push(result);
+    return null;
+  };
+  const RootComponent = (props) => {
+    const result = useCompiledLazyLoadQuery(compiledHooks_Root_executionQuery_documents, {variables: props.variables});
+    useLazyLoadQueryResult = result;
+    return result.data ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ChildComponent, {
+      user: result.data.user
+    }), /* @__PURE__ */ React.createElement(ChildRefetchableComponent, {
+      user: result.data.user
+    }), /* @__PURE__ */ React.createElement(ChildForwardPaginationComponent, {
+      user: result.data.user
+    }), /* @__PURE__ */ React.createElement(ComponentOnQueryType, {
+      query: result.data
+    })) : null;
+  };
+  beforeEach(() => {
+    useLazyLoadQueryResult = null;
+    useFragmentResult = [];
+    useRefetchableFragmentResult = [];
+    forwardUsePaginationFragmentResult = [];
+    backwardUsePaginationFragmentResult = [];
+    componentOnQueryTypeResult = [];
+    client = createMockClient(schema, {
+      cache: {
+        possibleTypes: {
+          Node: ["User"]
+        },
+        typePolicies
+      }
+    });
+    act(() => {
+      testRenderer = createTestRenderer(/* @__PURE__ */ React.createElement(ApolloProvider, {
+        client
+      }, /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(RootComponent, {
+        variables: {
+          userId: 42,
+          messagesBackwardCount: 1,
+          messagesBeforeCursor: ""
+        }
+      }))));
+    });
+  });
+  describe(useCompiledLazyLoadQuery, () => {
+    it("correctly returns loading state", () => __async(void 0, null, function* () {
+      expect(useLazyLoadQueryResult).toEqual({
+        data: void 0,
+        error: void 0
+      });
+      yield act(() => client.mock.resolveMostRecentOperation((operation) => generate(operation)));
+      expect(useLazyLoadQueryResult).toEqual({
+        data: expect.objectContaining({}),
+        error: void 0
+      });
+    }));
+    it("cancels the execution query while in-flight on unmount", () => __async(void 0, null, function* () {
+      expect(activeQueries(client).map((query) => query.queryName)).toEqual([
+        "compiledHooks_Root_executionQuery"
+      ]);
+      yield act(() => __async(void 0, null, function* () {
+        testRenderer.unmount();
+        return new Promise((resolve2) => setTimeout(resolve2, 0));
+      }));
+      expect(client.getObservableQueries().size).toBe(0);
+    }));
+    describe("once loaded", () => {
+      let executionQueryId;
+      beforeEach(() => __async(void 0, null, function* () {
+        executionQueryId = last(activeQueries(client)).queryId;
+        yield act(() => client.mock.resolveMostRecentOperation((operation) => generate(operation, {
+          User: (options, generateId) => {
+            return {
+              id: options.parentType === "Query" ? operation.request.variables.userId : generateId()
+            };
+          },
+          Conversation: () => ({
+            id: "first-paged-conversation"
+          }),
+          Message: () => ({
+            id: "first-paged-message"
+          })
+        })));
+      }));
+      it("unsubscribes from the execution query", () => __async(void 0, null, function* () {
+        expect(activeQueries(client).map((query) => query.queryId)).not.toContain(executionQueryId);
+      }));
+      it("loads all data of the execution query into the store", () => {
+        expect(client.cache.extract()).toMatchInlineSnapshot(`
+          Object {
+            "Conversation:first-paged-conversation": Object {
+              "__typename": "Conversation",
+              "id": "first-paged-conversation",
+              "messages:compiledHooks_conversation_messages": Object {
+                "__typename": "ConversationMessagesConnection",
+                "edges": Array [
+                  Object {
+                    "__typename": "ConversationMessagesConnectionEdge",
+                    "cursor": "<mock-value-for-field-\\"cursor\\">",
+                    "node": Object {
+                      "__ref": "Message:first-paged-message",
+                    },
+                  },
+                ],
+                "pageInfo": Object {
+                  "__typename": "PageInfo",
+                  "hasPreviousPage": false,
+                  "startCursor": "<mock-value-for-field-\\"startCursor\\">",
+                },
+              },
+              "title": "<mock-value-for-field-\\"title\\">",
+            },
+            "Message:first-paged-message": Object {
+              "__typename": "Message",
+              "id": "first-paged-message",
+              "text": "<mock-value-for-field-\\"text\\">",
+            },
+            "NonNode:<mock-value-for-field-\\"id\\">": Object {
+              "__typename": "NonNode",
+              "id": "<mock-value-for-field-\\"id\\">",
+            },
+            "ROOT_QUERY": Object {
+              "__typename": "Query",
+              "nonNode": Object {
+                "__ref": "NonNode:<mock-value-for-field-\\"id\\">",
+              },
+              "user({\\"id\\":42})": Object {
+                "__ref": "User:42",
+              },
+            },
+            "User:42": Object {
+              "__typename": "User",
+              "avatarUrl({\\"size\\":21})": "<mock-value-for-field-\\"avatarUrl\\">",
+              "conversations:compiledHooks_user_conversations": Object {
+                "__typename": "ConversationsConnection",
+                "edges": Array [
+                  Object {
+                    "__typename": "ConversationsConnectionEdge",
+                    "cursor": "<mock-value-for-field-\\"cursor\\">",
+                    "node": Object {
+                      "__ref": "Conversation:first-paged-conversation",
+                    },
+                  },
+                ],
+                "pageInfo": Object {
+                  "__typename": "PageInfo",
+                  "endCursor": "<mock-value-for-field-\\"endCursor\\">",
+                  "hasNextPage": false,
+                },
+              },
+              "id": 42,
+              "name": "<mock-value-for-field-\\"name\\">",
+              "petName": "<mock-value-for-field-\\"petName\\">",
+            },
+          }
+        `);
+      });
+      it("only returns the fields selected in the watch query to the component", () => {
+        expect(useLazyLoadQueryResult.data).toMatchInlineSnapshot(`
+          Object {
+            "__fragments": Object {
+              "avatarSize": 21,
+              "messagesBackwardCount": 1,
+              "messagesBeforeCursor": "",
+              "userId": 42,
+            },
+            "user": Object {
+              "__fragments": Object {
+                "avatarSize": 21,
+                "messagesBackwardCount": 1,
+                "messagesBeforeCursor": "",
+                "userId": 42,
+              },
+              "__typename": "User",
+              "id": 42,
+              "name": "<mock-value-for-field-\\"name\\">",
+            },
+          }
+        `);
+      });
+      it("does not re-render when a field that was not selected in the watch query is updated in the store", () => __async(void 0, null, function* () {
+        const before = useLazyLoadQueryResult.data;
+        yield act(() => __async(void 0, null, function* () {
+          client.cache.modify({
+            id: "User:42",
+            fields: {
+              petName: () => "Phoenix"
+            }
+          });
+          return new Promise((resolve2) => setTimeout(resolve2, 0));
+        }));
+        expect(useLazyLoadQueryResult.data).toBe(before);
+      }));
+      it("does re-render when a field that was selected in the watch query is updated in the store", () => __async(void 0, null, function* () {
+        const before = useLazyLoadQueryResult.data;
+        yield act(() => __async(void 0, null, function* () {
+          client.cache.modify({
+            id: "User:42",
+            fields: {
+              name: () => "Satya"
+            }
+          });
+          return new Promise((resolve2) => setTimeout(resolve2, 0));
+        }));
+        expect(useLazyLoadQueryResult.data).not.toBe(before);
+        expect(useLazyLoadQueryResult.data).toMatchInlineSnapshot(`
+          Object {
+            "__fragments": Object {
+              "avatarSize": 21,
+              "messagesBackwardCount": 1,
+              "messagesBeforeCursor": "",
+              "userId": 42,
+            },
+            "user": Object {
+              "__fragments": Object {
+                "avatarSize": 21,
+                "messagesBackwardCount": 1,
+                "messagesBeforeCursor": "",
+                "userId": 42,
+              },
+              "__typename": "User",
+              "id": 42,
+              "name": "Satya",
+            },
+          }
+        `);
+      }));
+      it("fetches new data when variables change", () => __async(void 0, null, function* () {
+        act(() => {
+          testRenderer.update(/* @__PURE__ */ React.createElement(ApolloProvider, {
+            client
+          }, /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(RootComponent, {
+            variables: {
+              userId: 21,
+              messagesBackwardCount: 1,
+              messagesBeforeCursor: ""
+            }
+          }))));
+        });
+        yield act(() => client.mock.resolveMostRecentOperation((operation) => generate(operation, {
+          User: () => ({id: operation.request.variables.userId})
+        })));
+        expect(client.cache.extract()["User:21"]).toMatchInlineSnapshot(`
+          Object {
+            "__typename": "User",
+            "avatarUrl({\\"size\\":21})": "<mock-value-for-field-\\"avatarUrl\\">",
+            "conversations:compiledHooks_user_conversations": Object {
+              "__typename": "ConversationsConnection",
+              "edges": Array [
+                Object {
+                  "__typename": "ConversationsConnectionEdge",
+                  "cursor": "<mock-value-for-field-\\"cursor\\">",
+                  "node": Object {
+                    "__ref": "Conversation:<Conversation-mock-id-5>",
+                  },
+                },
+              ],
+              "pageInfo": Object {
+                "__typename": "PageInfo",
+                "endCursor": "<mock-value-for-field-\\"endCursor\\">",
+                "hasNextPage": false,
+              },
+            },
+            "id": 21,
+            "name": "<mock-value-for-field-\\"name\\">",
+            "petName": "<mock-value-for-field-\\"petName\\">",
+          }
+        `);
+      }));
+      it("does not try to kick-off a new query when the variables object deep equals the previous one", () => __async(void 0, null, function* () {
+        const spy = jest.spyOn(client, "query");
+        yield act(() => __async(void 0, null, function* () {
+          testRenderer.update(/* @__PURE__ */ React.createElement(ApolloProvider, {
+            client
+          }, /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(RootComponent, {
+            variables: {
+              userId: 42,
+              messagesBackwardCount: 1,
+              messagesBeforeCursor: ""
+            }
+          }))));
+          return new Promise((resolve2) => setTimeout(resolve2, 100));
+        }));
+        expect(spy).not.toHaveBeenCalled();
+      }));
+      it("removes all watch queries on unmount", () => __async(void 0, null, function* () {
+        yield act(() => __async(void 0, null, function* () {
+          testRenderer.unmount();
+          return new Promise((resolve2) => setTimeout(resolve2, 0));
+        }));
+        expect(client.getObservableQueries().size).toBe(0);
+      }));
+    });
+  });
+  function itBehavesLikeFragment(returnedResults, fragmentSpecificFieldSelections) {
+    beforeEach(() => __async(this, null, function* () {
+      yield act(() => client.mock.resolveMostRecentOperation((operation) => {
+        const result = generate(operation, {
+          User: () => ({
+            id: 42
+          }),
+          Conversation: () => ({
+            id: "first-paged-conversation"
+          }),
+          Message: () => ({
+            id: "first-paged-message"
+          }),
+          PageInfo: () => ({
+            startCursor: "first-page-start-cursor",
+            endCursor: "first-page-end-cursor",
+            hasNextPage: true,
+            hasPreviousPage: true
+          })
+        });
+        return result;
+      }));
+    }));
+    it("only returns the fields selected in the watch query to the component", () => {
+      expect(last(returnedResults())).toEqual(__objSpread({
+        __fragments: {
+          avatarSize: 21,
+          messagesBackwardCount: 1,
+          messagesBeforeCursor: "",
+          userId: 42
+        },
+        __typename: "User",
+        id: 42,
+        petName: '<mock-value-for-field-"petName">'
+      }, fragmentSpecificFieldSelections));
+    });
+    it("returns the same object when a field that was not selected in the watch query is updated in the store", () => __async(this, null, function* () {
+      const before = last(returnedResults());
+      yield act(() => __async(this, null, function* () {
+        client.cache.modify({
+          id: "User:42",
+          fields: {
+            name: () => "Satya"
+          }
+        });
+        return new Promise((resolve2) => setTimeout(resolve2, 0));
+      }));
+      expect(last(returnedResults())).toBe(before);
+    }));
+    it("returns a new object when a field that was selected in the watch query is updated in the store", () => __async(this, null, function* () {
+      yield act(() => __async(this, null, function* () {
+        client.cache.modify({
+          id: "User:42",
+          fields: {
+            petName: () => "some new value"
+          }
+        });
+        return new Promise((resolve2) => setTimeout(resolve2, 0));
+      }));
+      expect(returnedResults().length).toBe(2);
+      expect(last(returnedResults())).toMatchObject({
+        petName: "some new value"
+      });
+    }));
+    it("returns data synchronously", () => {
+      expect(returnedResults().length).toBe(1);
+    });
+    it("fetches new data when variables change", () => __async(this, null, function* () {
+      act(() => {
+        testRenderer.update(/* @__PURE__ */ React.createElement(ApolloProvider, {
+          client
+        }, /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(RootComponent, {
+          variables: {
+            userId: 21,
+            messagesBackwardCount: 1,
+            messagesBeforeCursor: ""
+          }
+        }))));
+      });
+      yield act(() => client.mock.resolveMostRecentOperation((operation) => generate(operation, {
+        User: () => ({id: operation.request.variables.userId})
+      })));
+      expect(last(returnedResults()).id).toBe(21);
+    }));
+  }
+  describe(useCompiledFragment, () => {
+    itBehavesLikeFragment(() => useFragmentResult, {
+      petName: '<mock-value-for-field-"petName">'
+    });
+    it("also works with fragments on the Query type", () => {
+      expect(last(componentOnQueryTypeResult)).toMatchInlineSnapshot(`
+        Object {
+          "__fragments": Object {
+            "avatarSize": 21,
+            "messagesBackwardCount": 1,
+            "messagesBeforeCursor": "",
+            "userId": 42,
+          },
+          "nonNode": Object {
+            "__typename": "NonNode",
+            "id": "<mock-value-for-field-\\"id\\">",
+          },
+        }
+      `);
+    });
+  });
+  function itBehavesLikeRefetchableFragment(returnedResults) {
+    it.todo("supports variables with default values on either operations or with @argumentDefinitions");
+    describe("when refetching", () => {
+      let onCompleted;
+      let disposable;
+      beforeEach(() => {
+        const [_data, refetch] = last(returnedResults());
+        onCompleted = jest.fn();
+        disposable = refetch({avatarSize: 42}, {onCompleted});
+      });
+      it("can be cancelled", () => {
+        const query = last(activeQueries(client));
+        disposable.dispose();
+        expect(client.getObservableQueries().has(query.queryId)).toBeFalsy();
+      });
+      it("cancels when unmounting", () => __async(this, null, function* () {
+        yield act(() => __async(this, null, function* () {
+          const query = last(activeQueries(client));
+          testRenderer.unmount();
+          yield new Promise((resolve2) => setTimeout(resolve2, 0));
+          expect(client.getObservableQueries().has(query.queryId)).toBeFalsy();
+        }));
+      }));
+      describe("successfully", () => {
+        beforeEach(() => __async(this, null, function* () {
+          yield act(() => {
+            client.mock.resolveMostRecentOperation((operation) => generate(operation, {
+              Node: () => ({
+                id: 42,
+                avatarUrl: `avatarUrl-with-size-${operation.request.variables.avatarSize}`
+              })
+            }));
+            return new Promise((resolve2) => setTimeout(resolve2, 0));
+          });
+        }));
+        it("returns a new object from the hook", () => {
+          expect(last(returnedResults())[0]).toMatchObject({
+            __typename: "User",
+            avatarUrl: "avatarUrl-with-size-42",
+            id: 42
+          });
+        });
+        it("updates the fragment reference request variables for future requests", () => {
+          expect(last(returnedResults())[0]).toMatchObject({
+            __fragments: {
+              avatarSize: 42,
+              userId: 42
+            }
+          });
+        });
+        it("invokes the onComplete callback without error", () => {
+          expect(onCompleted).toHaveBeenCalledWith(null);
+        });
+      });
+      describe("and an error occurs", () => {
+        const error = new Error("oh noes");
+        beforeEach(() => __async(this, null, function* () {
+          yield act(() => client.mock.rejectMostRecentOperation(error));
+        }));
+        it("invokes the onComplete callback when an error occurs", () => {
+          expect(onCompleted).toHaveBeenCalledWith(error);
+        });
+        it("does not update the fragment reference request variables for future requests", () => __async(this, null, function* () {
+          const [_data, refetch] = last(returnedResults());
+          refetch({});
+          expect(client.mock.getMostRecentOperation().request.variables.avatarSize).toBe(21);
+        }));
+      });
+    });
+  }
+  describe(useCompiledRefetchableFragment, () => {
+    itBehavesLikeFragment(() => useRefetchableFragmentResult.map(([data, _refetch]) => data), {avatarUrl: '<mock-value-for-field-"avatarUrl">'});
+    itBehavesLikeRefetchableFragment(() => useRefetchableFragmentResult);
+  });
+  describe(useCompiledPaginationFragment, () => {
+    itBehavesLikeFragment(() => forwardUsePaginationFragmentResult.map(({data}) => data), {
+      avatarUrl: '<mock-value-for-field-"avatarUrl">',
+      conversations: {
+        __typename: "ConversationsConnection",
+        edges: [
+          {
+            __typename: "ConversationsConnectionEdge",
+            cursor: '<mock-value-for-field-"cursor">',
+            node: {
+              __fragments: {
+                avatarSize: 21,
+                messagesBackwardCount: 1,
+                messagesBeforeCursor: "",
+                userId: 42
+              },
+              __typename: "Conversation",
+              id: "first-paged-conversation",
+              title: '<mock-value-for-field-"title">'
+            }
+          }
+        ],
+        pageInfo: {
+          __typename: "PageInfo",
+          endCursor: "first-page-end-cursor",
+          hasNextPage: true
+        }
+      }
+    });
+    itBehavesLikeRefetchableFragment(() => forwardUsePaginationFragmentResult.map(({data, refetch}) => [
+      data,
+      refetch
+    ]));
+    describe("when paginating forward", () => {
+      it("returns that next data is available", () => {
+        const {hasNext} = last(forwardUsePaginationFragmentResult);
+        expect(hasNext).toBeTruthy();
+      });
+      it("uses the correct count and cursor values", () => {
+        act(() => {
+          const {loadNext} = last(forwardUsePaginationFragmentResult);
+          loadNext(123);
+        });
+        const operation = client.mock.getMostRecentOperation();
+        expect(operation.request.variables).toMatchObject({
+          conversationsForwardCount: 123,
+          conversationsAfterCursor: "first-page-end-cursor"
+        });
+      });
+      it("returns that a pagination operation is in-flight", () => {
+        act(() => {
+          const {loadNext} = last(forwardUsePaginationFragmentResult);
+          loadNext(123);
+        });
+        const {isLoadingNext} = last(forwardUsePaginationFragmentResult);
+        expect(isLoadingNext).toBeTruthy();
+      });
+      it("can be cancelled", () => {
+        act(() => {
+          const {loadNext} = last(forwardUsePaginationFragmentResult);
+          const disposable = loadNext(123);
+          const query = last(activeQueries(client));
+          disposable.dispose();
+          expect(client.getObservableQueries().has(query.queryId)).toBeFalsy();
+        });
+      });
+      it("cancels when unmounting", () => __async(void 0, null, function* () {
+        yield act(() => __async(void 0, null, function* () {
+          const {loadNext} = last(forwardUsePaginationFragmentResult);
+          loadNext(123);
+          const query = last(activeQueries(client));
+          testRenderer.unmount();
+          yield new Promise((resolve2) => setTimeout(resolve2, 0));
+          expect(client.getObservableQueries().has(query.queryId)).toBeFalsy();
+        }));
+      }));
+      it("invokes the onComplete callback when an error occurs", () => __async(void 0, null, function* () {
+        const onCompleted = jest.fn();
+        const error = new Error("oh noes");
+        const {loadNext} = last(forwardUsePaginationFragmentResult);
+        yield act(() => __async(void 0, null, function* () {
+          loadNext(1, {onCompleted});
+          yield client.mock.rejectMostRecentOperation(error);
+        }));
+        expect(onCompleted).toHaveBeenCalledWith(error);
+      }));
+      describe("and having received the response", () => {
+        let onCompleted;
+        beforeEach(() => __async(void 0, null, function* () {
+          onCompleted = jest.fn();
+          yield act(() => __async(void 0, null, function* () {
+            const {loadNext} = last(forwardUsePaginationFragmentResult);
+            loadNext(1, {onCompleted});
+            yield new Promise((resolve2) => setTimeout(resolve2, 0));
+            client.mock.resolveMostRecentOperation((operation) => generate(operation, {
+              Node: () => ({
+                id: 42
+              }),
+              Conversation: () => ({
+                id: "second-paged-conversation"
+              }),
+              PageInfo: () => ({
+                endCursor: "second-page-end-cursor",
+                hasNextPage: false
+              })
+            }));
+            return new Promise((resolve2) => setTimeout(resolve2, 0));
+          }));
+        }));
+        it("returns that no pagination operation is in-flight", () => {
+          const {isLoadingNext} = last(forwardUsePaginationFragmentResult);
+          expect(isLoadingNext).toBeFalsy();
+        });
+        it("loads the new data into the store", () => {
+          expect(client.cache.extract()).toMatchObject({
+            "Conversation:second-paged-conversation": {
+              id: "second-paged-conversation",
+              __typename: "Conversation",
+              title: '<mock-value-for-field-"title">'
+            }
+          });
+        });
+        it("returns the complete list data (previous+new) from the hook", () => {
+          const result = last(forwardUsePaginationFragmentResult);
+          expect(result.data.conversations.edges.map((edge) => edge.node.id)).toMatchInlineSnapshot(`
+            Array [
+              "first-paged-conversation",
+              "second-paged-conversation",
+            ]
+          `);
+        });
+        it("uses the new cursor value", () => {
+          act(() => {
+            const {loadNext} = last(forwardUsePaginationFragmentResult);
+            loadNext(123);
+          });
+          const operation = client.mock.getMostRecentOperation();
+          expect(operation.request.variables).toMatchObject({
+            conversationsAfterCursor: "second-page-end-cursor"
+          });
+        });
+        it("returns that no next data is available", () => {
+          const {hasNext} = last(forwardUsePaginationFragmentResult);
+          expect(hasNext).toBeFalsy();
+        });
+        it("invokes the onComplete callback without error", () => {
+          expect(onCompleted).toHaveBeenCalledWith(null);
+        });
+      });
+    });
+    describe("when paginating backward", () => {
+      it("returns that previous data is available", () => {
+        const {hasPrevious} = last(backwardUsePaginationFragmentResult);
+        expect(hasPrevious).toBeTruthy();
+      });
+      it("uses the correct count and cursor values", () => {
+        act(() => {
+          const {loadPrevious} = last(backwardUsePaginationFragmentResult);
+          loadPrevious(123);
+        });
+        const operation = client.mock.getMostRecentOperation();
+        expect(operation.request.variables).toMatchObject({
+          messagesBackwardCount: 123,
+          messagesBeforeCursor: "first-page-start-cursor"
+        });
+      });
+      it("returns that a pagination operation is in-flight", () => {
+        act(() => {
+          const {loadPrevious} = last(backwardUsePaginationFragmentResult);
+          loadPrevious(123);
+        });
+        const {isLoadingPrevious} = last(backwardUsePaginationFragmentResult);
+        expect(isLoadingPrevious).toBeTruthy();
+      });
+      it("can be cancelled", () => {
+        act(() => {
+          const {loadPrevious} = last(backwardUsePaginationFragmentResult);
+          const disposable = loadPrevious(123);
+          const query = last(activeQueries(client));
+          disposable.dispose();
+          expect(client.getObservableQueries().has(query.queryId)).toBeFalsy();
+        });
+      });
+      it("cancels when unmounting", () => __async(void 0, null, function* () {
+        yield act(() => __async(void 0, null, function* () {
+          const {loadPrevious} = last(backwardUsePaginationFragmentResult);
+          loadPrevious(123);
+          const query = last(activeQueries(client));
+          testRenderer.unmount();
+          yield new Promise((resolve2) => setTimeout(resolve2, 0));
+          expect(client.getObservableQueries().has(query.queryId)).toBeFalsy();
+        }));
+      }));
+      it("invokes the onComplete callback when an error occurs", () => __async(void 0, null, function* () {
+        const onCompleted = jest.fn();
+        const error = new Error("oh noes");
+        const {loadPrevious} = last(backwardUsePaginationFragmentResult);
+        yield act(() => __async(void 0, null, function* () {
+          loadPrevious(1, {onCompleted});
+          yield client.mock.rejectMostRecentOperation(error);
+        }));
+        expect(onCompleted).toHaveBeenCalledWith(error);
+      }));
+      describe("and having received the response", () => {
+        let onCompleted;
+        beforeEach(() => __async(void 0, null, function* () {
+          onCompleted = jest.fn();
+          yield act(() => {
+            const {loadPrevious} = last(backwardUsePaginationFragmentResult);
+            loadPrevious(1, {onCompleted});
+            client.mock.resolveMostRecentOperation((operation) => generate(operation, {
+              Node: () => ({
+                id: 42
+              }),
+              Message: () => ({
+                id: "second-paged-message"
+              }),
+              PageInfo: () => ({
+                startCursor: "second-page-start-cursor",
+                hasPreviousPage: false
+              })
+            }));
+            return new Promise((resolve2) => setTimeout(resolve2, 0));
+          });
+        }));
+        it("returns that no pagination operation is in-flight", () => {
+          const {isLoadingPrevious} = last(backwardUsePaginationFragmentResult);
+          expect(isLoadingPrevious).toBeFalsy();
+        });
+        it("loads the new data into the store", () => {
+          expect(client.cache.extract()).toMatchObject({
+            "Message:second-paged-message": {
+              id: "second-paged-message",
+              __typename: "Message",
+              text: '<mock-value-for-field-"text">'
+            }
+          });
+        });
+        it("returns the complete list data (previous+new) from the hook", () => {
+          const result = last(backwardUsePaginationFragmentResult);
+          expect(result.data.messages.edges.map((edge) => edge.node.id)).toMatchInlineSnapshot(`
+            Array [
+              "second-paged-message",
+              "first-paged-message",
+            ]
+          `);
+        });
+        it("uses the new cursor value", () => {
+          act(() => {
+            const {loadPrevious} = last(backwardUsePaginationFragmentResult);
+            loadPrevious(123);
+          });
+          const operation = client.mock.getMostRecentOperation();
+          expect(operation.request.variables).toMatchObject({
+            messagesBeforeCursor: "second-page-start-cursor"
+          });
+        });
+        it("returns that no previous data is available", () => {
+          const {hasPrevious} = last(backwardUsePaginationFragmentResult);
+          expect(hasPrevious).toBeFalsy();
+        });
+        it("invokes the onComplete callback without error", () => {
+          expect(onCompleted).toHaveBeenCalledWith(null);
+        });
+      });
+    });
+  });
+});
+var ErrorBoundary = class extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {hasError: false};
+  }
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error({error, errorInfo});
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ React.createElement("h1", null, "Something went wrong.");
+    }
+    return this.props.children;
+  }
+};
+function last(list) {
+  return list[list.length - 1];
+}
+function activeQueries(client) {
+  return Array.from(client.getObservableQueries().values());
+}