[NOT MERGE] Repro and "fix" #362

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
+  // "editor.formatOnSave": true,
   "cSpell.words": ["Daichi", "fukuda", "Kadji"]
 }

examples/apollo-watch-fragments/package.json

@@ -12,7 +12,7 @@
     "react-dom": "^17.0.2"
   },
   "scripts": {
-    "start": "yarn generate-resolver-typings && concurrently 'yarn duct-tape-compiler --watch' 'yarn serve'",
+    "start": "yarn generate-resolver-typings && yarn concurrently \"yarn duct-tape-compiler --watch\" \"yarn serve\"",
     "serve": "webpack serve",
     "build": "webpack",
     "duct-tape-compiler": "duct-tape-compiler --schema ./data/schema.graphql --src ./src --emitQueryDebugComments",

examples/apollo-watch-fragments/src/App.tsx

@@ -11,12 +11,17 @@ import { AppQuery as AppQueryType } from "./__generated__/AppQuery.graphql";
 
 const App: React.FC = () => {
   const addTodo = useAddTodoMutation();
+  // In People App, because we weren't able to use refetchable / pagination hook, we kept our variables
+  // in a state and passed to the query. In this example, we're trying to reproduce it, but using after
+  // variable (just an example, we could use any other variable)
+  const [variables, setVariables] = React.useState({ after: "" });
 
+  // Simplified the query to have only after variable (ignored includeSomeOtherField to keep it simple)
   const result = useLazyLoadQuery<AppQueryType>(
     graphql`
-      query AppQuery($includeSomeOtherField: Boolean!) {
+      query AppQuery($after: String) {
         me {
-          todoStats: todos(first: 0) {
+          todoStats: todos(first: 0, after: $after) {
             id
             totalCount
             ...TodoListFooter_todosFragment
@@ -25,8 +30,17 @@ const App: React.FC = () => {
         }
       }
     `,
-    { includeSomeOtherField: false },
+    variables,
   );
+
+  // This is a simplified version of how we're refetching data now. In our code, we raise an event  
+  // that is caught on the host app side and it changes the variables (in our case, sortBy or filterBy)
+  const refetch = () => {
+    setVariables((prev) => ({
+      after: prev.after + "1",
+    }));
+  };
+
   if (result.error) {
     throw result.error;
   } else if (!result.data) {
@@ -47,7 +61,7 @@ const App: React.FC = () => {
       <section className="main">
         <input id="toggle-all" className="toggle-all" type="checkbox" />
         <label htmlFor="toggle-all">Mark all as complete</label>
-        <TodoList node={result.data.me} />
+        <TodoList node={result.data.me} refetch={refetch} />
       </section>
       {result.data.me.todoStats.totalCount > 0 && (
         <TodoListFooter todos={result.data.me.todoStats} />

examples/apollo-watch-fragments/src/Todo.tsx

@@ -2,22 +2,25 @@ import React, { useCallback } from "react";
 import {
   useRefetchableFragment,
   shallowCompareFragmentReferences,
+  useFragment,
 } from "@graphitation/apollo-react-relay-duct-tape";
 import { graphql } from "@graphitation/graphql-js-tag";
 
 import useChangeTodoStatusMutation from "./useChangeTodoStatusMutation";
 
 import { Todo_todoFragment$key } from "./__generated__/Todo_todoFragment.graphql";
 
-const Todo: React.FC<{ todo: Todo_todoFragment$key }> = ({ todo: todoRef }) => {
-  const [todo, refetch] = useRefetchableFragment(
+const Todo: React.FC<{ todo: Todo_todoFragment$key; refetch: () => void }> = ({ todo: todoRef, refetch }) => {
+  // Replaced useRefetchableFragment with useFragment (what we use right now)
+  // Removed @include because it didn't work for me (if we started with includeSomeOtherField as true, it worked,
+  // but if we started with it as false, it didn't work). Removed it for simplicity.
+  const todo = useFragment(
     graphql`
-      fragment Todo_todoFragment on Todo
-      @refetchable(queryName: "TodoRefetchQuery") {
+      fragment Todo_todoFragment on Todo {
         id
         description
         isCompleted
-        someOtherField @include(if: $includeSomeOtherField)
+        someOtherField
       }
     `,
     todoRef,
@@ -34,7 +37,8 @@ const Todo: React.FC<{ todo: Todo_todoFragment$key }> = ({ todo: todoRef }) => {
   );
 
   const refresh = useCallback(() => {
-    refetch({ includeSomeOtherField: !todo.someOtherField });
+    // Keep it simple, remove the parameters
+    refetch();
   }, [refetch]);
 
   return (

examples/apollo-watch-fragments/src/TodoList.tsx

@@ -10,25 +10,16 @@ import { TodoList_nodeFragment$key } from "./__generated__/TodoList_nodeFragment
 import { Todo } from "./Todo";
 import { LoadingSpinner } from "./LoadingSpinner";
 
-const TodoList: React.FC<{ node: TodoList_nodeFragment$key }> = ({
+const TodoList: React.FC<{ node: TodoList_nodeFragment$key, refetch: () => void }> = ({
   node: nodeRef,
+  refetch
 }) => {
-  const {
-    data: node,
-    hasNext,
-    loadNext,
-    isLoadingNext,
-  } = usePaginationFragment(
+  const node = useFragment(
     graphql`
-      fragment TodoList_nodeFragment on NodeWithTodos
-      @refetchable(queryName: "TodoListPaginationQuery")
-      @argumentDefinitions(
-        count: { type: "Int!", defaultValue: 5 }
-        after: { type: "String!", defaultValue: "" }
-      ) {
+      fragment TodoList_nodeFragment on NodeWithTodos {
         __typename
-        todos(first: $count, after: $after)
-          @connection(key: "TodosList_todos") {
+        id
+        todos(first: 5, after: $after) {
           edges {
             node {
               id
@@ -46,14 +37,14 @@ const TodoList: React.FC<{ node: TodoList_nodeFragment$key }> = ({
   /* <!-- List items should get the class `editing` when editing and `completed` when marked as completed --> */
   return (
     <ul className="todo-list">
-      {node.todos.edges.map(({ node: todo }) => {
+      {node?.todos.edges.map(({ node: todo }) => {
         return (
           <li key={todo.id} className={todo.isCompleted ? "completed" : ""}>
-            <Todo todo={todo} />
+            <Todo todo={todo} refetch={refetch} />
           </li>
         );
       })}
-      {hasNext || isLoadingNext ? (
+      {/* {hasNext || isLoadingNext ? (
         <li className="load-more">
           {isLoadingNext ? (
             <LoadingSpinner />
@@ -65,7 +56,7 @@ const TodoList: React.FC<{ node: TodoList_nodeFragment$key }> = ({
             />
           )}
         </li>
-      ) : null}
+      ) : null} */}
     </ul>
   );
 };