From f90bda4983ce545b8cacf790097f399409e1b822 Mon Sep 17 00:00:00 2001 From: "EUROPE\\dragoshomner" Date: Thu, 26 Oct 2023 11:47:23 +0200 Subject: [PATCH 1/3] make example work for variables --- .vscode/settings.json | 2 +- examples/apollo-watch-fragments/package.json | 2 +- examples/apollo-watch-fragments/src/App.tsx | 16 +- examples/apollo-watch-fragments/src/Todo.tsx | 12 +- .../apollo-watch-fragments/src/TodoList.tsx | 25 +- .../src/__generated__/AppQuery.graphql.ts | 249 +++----- .../TodoListPaginationQuery.graphql.ts | 581 ------------------ .../TodoList_nodeFragment.graphql.ts | 4 +- .../TodoList_nodeWatchNodeQuery.graphql.ts | 298 +++++++++ .../__generated__/TodoRefetchQuery.graphql.ts | 294 --------- .../Todo_todoFragment.graphql.ts | 4 +- .../Todo_todoWatchNodeQuery.graphql.ts | 187 ++++++ .../compiledHooks/useCompiledFragment.ts | 10 +- .../fragmentReferencesFieldPolicy.ts | 17 +- 14 files changed, 624 insertions(+), 1077 deletions(-) delete mode 100644 examples/apollo-watch-fragments/src/__generated__/TodoListPaginationQuery.graphql.ts create mode 100644 examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts delete mode 100644 examples/apollo-watch-fragments/src/__generated__/TodoRefetchQuery.graphql.ts create mode 100644 examples/apollo-watch-fragments/src/__generated__/Todo_todoWatchNodeQuery.graphql.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 8892811ad..9c95b79c0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true, + // "editor.formatOnSave": true, "cSpell.words": ["Daichi", "fukuda", "Kadji"] } diff --git a/examples/apollo-watch-fragments/package.json b/examples/apollo-watch-fragments/package.json index d7daafc79..f8d3a5d96 100644 --- a/examples/apollo-watch-fragments/package.json +++ b/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", diff --git a/examples/apollo-watch-fragments/src/App.tsx b/examples/apollo-watch-fragments/src/App.tsx index 90600761a..de92b680e 100644 --- a/examples/apollo-watch-fragments/src/App.tsx +++ b/examples/apollo-watch-fragments/src/App.tsx @@ -11,12 +11,13 @@ import { AppQuery as AppQueryType } from "./__generated__/AppQuery.graphql"; const App: React.FC = () => { const addTodo = useAddTodoMutation(); + const [variables, setVariables] = React.useState({ after: "" }); const result = useLazyLoadQuery( 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 +26,15 @@ const App: React.FC = () => { } } `, - { includeSomeOtherField: false }, + variables, ); + + const refetch = () => { + setVariables((prev) => ({ + after: prev.after + "1", + })); + }; + if (result.error) { throw result.error; } else if (!result.data) { @@ -47,7 +55,7 @@ const App: React.FC = () => {
- +
{result.data.me.todoStats.totalCount > 0 && ( diff --git a/examples/apollo-watch-fragments/src/Todo.tsx b/examples/apollo-watch-fragments/src/Todo.tsx index 3c2c5b63a..e2bafcd25 100644 --- a/examples/apollo-watch-fragments/src/Todo.tsx +++ b/examples/apollo-watch-fragments/src/Todo.tsx @@ -2,6 +2,7 @@ import React, { useCallback } from "react"; import { useRefetchableFragment, shallowCompareFragmentReferences, + useFragment, } from "@graphitation/apollo-react-relay-duct-tape"; import { graphql } from "@graphitation/graphql-js-tag"; @@ -9,15 +10,14 @@ 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 }) => { + 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 +34,7 @@ const Todo: React.FC<{ todo: Todo_todoFragment$key }> = ({ todo: todoRef }) => { ); const refresh = useCallback(() => { - refetch({ includeSomeOtherField: !todo.someOtherField }); + refetch(); }, [refetch]); return ( diff --git a/examples/apollo-watch-fragments/src/TodoList.tsx b/examples/apollo-watch-fragments/src/TodoList.tsx index a8c1e2f8a..f226fb0f0 100644 --- a/examples/apollo-watch-fragments/src/TodoList.tsx +++ b/examples/apollo-watch-fragments/src/TodoList.tsx @@ -10,25 +10,20 @@ 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 } + first: { type: "Int!", defaultValue: 5 } after: { type: "String!", defaultValue: "" } ) { __typename - todos(first: $count, after: $after) - @connection(key: "TodosList_todos") { + id + todos(first: $first, after: $after) { edges { node { id @@ -46,14 +41,14 @@ const TodoList: React.FC<{ node: TodoList_nodeFragment$key }> = ({ /* */ return (
    - {node.todos.edges.map(({ node: todo }) => { + {node?.todos.edges.map(({ node: todo }) => { return (
  • - +
    • ); })} - {hasNext || isLoadingNext ? ( + {/* {hasNext || isLoadingNext ? (
  • {isLoadingNext ? ( @@ -65,7 +60,7 @@ const TodoList: React.FC<{ node: TodoList_nodeFragment$key }> = ({ /> )}
    • - ) : null} + ) : null} */}
); }; diff --git a/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts index ff902b6d6..26af027ce 100644 --- a/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts +++ b/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts @@ -4,7 +4,7 @@ import { FragmentRefs } from "@graphitation/apollo-react-relay-duct-tape"; export type AppQueryVariables = { - includeSomeOtherField: boolean; + after?: string | null | undefined; }; export type AppQueryResponse = { readonly me: { @@ -23,9 +23,9 @@ export type AppQuery = { /* -query AppQuery($includeSomeOtherField: Boolean!) { +query AppQuery($after: String) { me { - todoStats: todos(first: 0) { + todoStats: todos(first: 0, after: $after) { id totalCount ...TodoListFooter_todosFragment @@ -41,38 +41,33 @@ fragment TodoListFooter_todosFragment on TodosConnection { } fragment TodoList_nodeFragment on NodeWithTodos { + __isNodeWithTodos: __typename __typename - todos(first: 5, after: "") @connection(key: "TodosList_todos") { + id + todos(first: 5, after: "") { edges { node { id isCompleted ...Todo_todoFragment - __typename } - cursor - } - pageInfo { - endCursor - hasNextPage } id } - id } fragment Todo_todoFragment on Todo { id description isCompleted - someOtherField @include(if: $includeSomeOtherField) + someOtherField } */ /* -query AppQuery($includeSomeOtherField: Boolean!) { +query AppQuery($after: String) { me { - todoStats: todos(first: 0) { + todoStats: todos(first: 0, after: $after) { id totalCount ... on Node { @@ -93,95 +88,95 @@ var v0 = { "value": "AppQuery" }, v1 = { + "kind": "Name", + "value": "after" +}, +v2 = { "kind": "Variable", - "name": { - "kind": "Name", - "value": "includeSomeOtherField" - } + "name": (v1/*: any*/) }, -v2 = [ +v3 = [ { "kind": "VariableDefinition", - "variable": (v1/*: any*/), + "variable": (v2/*: any*/), "type": { - "kind": "NonNullType", - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Boolean" - } + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "String" } } } ], -v3 = { +v4 = { "kind": "Name", "value": "me" }, -v4 = { +v5 = { "kind": "Name", "value": "todoStats" }, -v5 = { +v6 = { "kind": "Name", "value": "todos" }, -v6 = { +v7 = { "kind": "Name", "value": "first" }, -v7 = [ +v8 = [ { "kind": "Argument", - "name": (v6/*: any*/), + "name": (v7/*: any*/), "value": { "kind": "IntValue", "value": "0" } + }, + { + "kind": "Argument", + "name": (v1/*: any*/), + "value": (v2/*: any*/) } ], -v8 = { +v9 = { "kind": "Field", "name": { "kind": "Name", "value": "id" } }, -v9 = { +v10 = { "kind": "Field", "name": { "kind": "Name", "value": "totalCount" } }, -v10 = { +v11 = { "kind": "Name", "value": "TodoListFooter_todosFragment" }, -v11 = { +v12 = { "kind": "Name", "value": "TodoList_nodeFragment" }, -v12 = { - "kind": "Field", - "name": { - "kind": "Name", - "value": "__typename" - } -}, v13 = { + "kind": "Name", + "value": "__typename" +}, +v14 = { "kind": "Field", "name": { "kind": "Name", "value": "isCompleted" } }, -v14 = { +v15 = { "kind": "Name", "value": "Todo_todoFragment" }, -v15 = { +v16 = { "kind": "InlineFragment", "typeCondition": { "kind": "NamedType", @@ -220,38 +215,38 @@ return { "kind": "OperationDefinition", "operation": "query", "name": (v0/*: any*/), - "variableDefinitions": (v2/*: any*/), + "variableDefinitions": (v3/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ { "kind": "Field", - "name": (v3/*: any*/), + "name": (v4/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ { "kind": "Field", - "alias": (v4/*: any*/), - "name": (v5/*: any*/), - "arguments": (v7/*: any*/), + "alias": (v5/*: any*/), + "name": (v6/*: any*/), + "arguments": (v8/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), (v9/*: any*/), + (v10/*: any*/), { "kind": "FragmentSpread", - "name": (v10/*: any*/) + "name": (v11/*: any*/) } ] } }, { "kind": "FragmentSpread", - "name": (v11/*: any*/) + "name": (v12/*: any*/) }, - (v8/*: any*/) + (v9/*: any*/) ] } } @@ -260,7 +255,7 @@ return { }, { "kind": "FragmentDefinition", - "name": (v10/*: any*/), + "name": (v11/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -278,13 +273,13 @@ return { "value": "uncompletedCount" } }, - (v8/*: any*/) + (v9/*: any*/) ] } }, { "kind": "FragmentDefinition", - "name": (v11/*: any*/), + "name": (v12/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -295,14 +290,26 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v12/*: any*/), { "kind": "Field", - "name": (v5/*: any*/), + "alias": { + "kind": "Name", + "value": "__isNodeWithTodos" + }, + "name": (v13/*: any*/) + }, + { + "kind": "Field", + "name": (v13/*: any*/) + }, + (v9/*: any*/), + { + "kind": "Field", + "name": (v6/*: any*/), "arguments": [ { "kind": "Argument", - "name": (v6/*: any*/), + "name": (v7/*: any*/), "value": { "kind": "IntValue", "value": "5" @@ -310,10 +317,7 @@ return { }, { "kind": "Argument", - "name": { - "kind": "Name", - "value": "after" - }, + "name": (v1/*: any*/), "value": { "kind": "StringValue", "value": "", @@ -321,29 +325,6 @@ return { } } ], - "directives": [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "connection" - }, - "arguments": [ - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "key" - }, - "value": { - "kind": "StringValue", - "value": "TodosList_todos", - "block": false - } - } - ] - } - ], "selectionSet": { "kind": "SelectionSet", "selections": [ @@ -365,63 +346,28 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), - (v13/*: any*/), + (v9/*: any*/), + (v14/*: any*/), { "kind": "FragmentSpread", - "name": (v14/*: any*/) - }, - (v12/*: any*/) + "name": (v15/*: any*/) + } ] } - }, - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "cursor" - } } ] } }, - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "pageInfo" - }, - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "endCursor" - } - }, - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "hasNextPage" - } - } - ] - } - }, - (v8/*: any*/) + (v9/*: any*/) ] } - }, - (v8/*: any*/) + } ] } }, { "kind": "FragmentDefinition", - "name": (v14/*: any*/), + "name": (v15/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -432,7 +378,7 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), + (v9/*: any*/), { "kind": "Field", "name": { @@ -440,32 +386,13 @@ return { "value": "description" } }, - (v13/*: any*/), + (v14/*: any*/), { "kind": "Field", "name": { "kind": "Name", "value": "someOtherField" - }, - "directives": [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "include" - }, - "arguments": [ - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "if" - }, - "value": (v1/*: any*/) - } - ] - } - ] + } } ] } @@ -479,32 +406,32 @@ return { "kind": "OperationDefinition", "operation": "query", "name": (v0/*: any*/), - "variableDefinitions": (v2/*: any*/), + "variableDefinitions": (v3/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ { "kind": "Field", - "name": (v3/*: any*/), + "name": (v4/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ { "kind": "Field", - "alias": (v4/*: any*/), - "name": (v5/*: any*/), - "arguments": (v7/*: any*/), + "alias": (v5/*: any*/), + "name": (v6/*: any*/), + "arguments": (v8/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), (v9/*: any*/), - (v15/*: any*/) + (v10/*: any*/), + (v16/*: any*/) ] } }, - (v8/*: any*/), - (v15/*: any*/) + (v9/*: any*/), + (v16/*: any*/) ] } } diff --git a/examples/apollo-watch-fragments/src/__generated__/TodoListPaginationQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/TodoListPaginationQuery.graphql.ts deleted file mode 100644 index 3bab289da..000000000 --- a/examples/apollo-watch-fragments/src/__generated__/TodoListPaginationQuery.graphql.ts +++ /dev/null @@ -1,581 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// @ts-nocheck - -import { FragmentRefs } from "@graphitation/apollo-react-relay-duct-tape"; -export type TodoListPaginationQueryVariables = { - after: string; - count: number; - includeSomeOtherField?: boolean | null | undefined; - id: string; -}; -export type TodoListPaginationQueryResponse = { - readonly node: { - readonly " $fragmentRefs": FragmentRefs<"TodoList_nodeFragment">; - } | null; -}; -export type TodoListPaginationQuery = { - readonly response: TodoListPaginationQueryResponse; - readonly variables: TodoListPaginationQueryVariables; -}; - - -/* -query TodoListPaginationQuery($after: String! = "", $count: Int! = 5, $includeSomeOtherField: Boolean, $id: ID!) { - node(id: $id) { - __typename - ...TodoList_nodeFragment_2QE1um - id - } -} - -fragment TodoList_nodeFragment_2QE1um on NodeWithTodos { - __typename - todos(first: $count, after: $after) @connection(key: "TodosList_todos") { - edges { - node { - id - isCompleted - ...Todo_todoFragment - __typename - } - cursor - } - pageInfo { - endCursor - hasNextPage - } - id - } - id -} - -fragment Todo_todoFragment on Todo { - id - description - isCompleted - someOtherField @include(if: $includeSomeOtherField) -} -*/ - -/* -query TodoListPaginationQuery($after: String! = "", $count: Int! = 5, $includeSomeOtherField: Boolean, $id: ID!) { - node(id: $id) { - __typename - ...TodoList_nodeFragment_2QE1um - id - ... on Node { - __fragments @client - } - } -} - -fragment TodoList_nodeFragment_2QE1um on NodeWithTodos { - __typename - todos(first: $count, after: $after) @connection(key: "TodosList_todos") { - edges { - node { - id - isCompleted - __typename - ... on Node { - __fragments @client - } - } - cursor - } - pageInfo { - endCursor - hasNextPage - } - id - } - id -} -*/ - -export const documents: import("@graphitation/apollo-react-relay-duct-tape-compiler").CompiledArtefactModule = (function(){ -var v0 = { - "kind": "Name", - "value": "TodoListPaginationQuery" -}, -v1 = { - "kind": "Name", - "value": "after" -}, -v2 = { - "kind": "Variable", - "name": (v1/*: any*/) -}, -v3 = { - "kind": "Variable", - "name": { - "kind": "Name", - "value": "count" - } -}, -v4 = { - "kind": "Variable", - "name": { - "kind": "Name", - "value": "includeSomeOtherField" - } -}, -v5 = { - "kind": "Name", - "value": "id" -}, -v6 = { - "kind": "Variable", - "name": (v5/*: any*/) -}, -v7 = [ - { - "kind": "VariableDefinition", - "variable": (v2/*: any*/), - "type": { - "kind": "NonNullType", - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "String" - } - } - }, - "defaultValue": { - "kind": "StringValue", - "value": "", - "block": false - } - }, - { - "kind": "VariableDefinition", - "variable": (v3/*: any*/), - "type": { - "kind": "NonNullType", - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Int" - } - } - }, - "defaultValue": { - "kind": "IntValue", - "value": "5" - } - }, - { - "kind": "VariableDefinition", - "variable": (v4/*: any*/), - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Boolean" - } - } - }, - { - "kind": "VariableDefinition", - "variable": (v6/*: any*/), - "type": { - "kind": "NonNullType", - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "ID" - } - } - } - } -], -v8 = { - "kind": "Name", - "value": "node" -}, -v9 = [ - { - "kind": "Argument", - "name": (v5/*: any*/), - "value": (v6/*: any*/) - } -], -v10 = { - "kind": "Field", - "name": { - "kind": "Name", - "value": "__typename" - } -}, -v11 = { - "kind": "Name", - "value": "TodoList_nodeFragment_2QE1um" -}, -v12 = { - "kind": "FragmentSpread", - "name": (v11/*: any*/) -}, -v13 = { - "kind": "Field", - "name": (v5/*: any*/) -}, -v14 = { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "NodeWithTodos" - } -}, -v15 = { - "kind": "Name", - "value": "todos" -}, -v16 = [ - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "first" - }, - "value": (v3/*: any*/) - }, - { - "kind": "Argument", - "name": (v1/*: any*/), - "value": (v2/*: any*/) - } -], -v17 = [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "connection" - }, - "arguments": [ - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "key" - }, - "value": { - "kind": "StringValue", - "value": "TodosList_todos", - "block": false - } - } - ] - } -], -v18 = { - "kind": "Name", - "value": "edges" -}, -v19 = { - "kind": "Field", - "name": { - "kind": "Name", - "value": "isCompleted" - } -}, -v20 = { - "kind": "Name", - "value": "Todo_todoFragment" -}, -v21 = { - "kind": "Field", - "name": { - "kind": "Name", - "value": "cursor" - } -}, -v22 = { - "kind": "Field", - "name": { - "kind": "Name", - "value": "pageInfo" - }, - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "endCursor" - } - }, - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "hasNextPage" - } - } - ] - } -}, -v23 = { - "kind": "InlineFragment", - "typeCondition": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Node" - } - }, - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "__fragments" - }, - "directives": [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "client" - } - } - ] - } - ] - } -}; -return { - "executionQueryDocument": { - "kind": "Document", - "definitions": [ - { - "kind": "OperationDefinition", - "operation": "query", - "name": (v0/*: any*/), - "variableDefinitions": (v7/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v8/*: any*/), - "arguments": (v9/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v10/*: any*/), - (v12/*: any*/), - (v13/*: any*/) - ] - } - } - ] - } - }, - { - "kind": "FragmentDefinition", - "name": (v11/*: any*/), - "typeCondition": (v14/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v10/*: any*/), - { - "kind": "Field", - "name": (v15/*: any*/), - "arguments": (v16/*: any*/), - "directives": (v17/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v18/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v8/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v13/*: any*/), - (v19/*: any*/), - { - "kind": "FragmentSpread", - "name": (v20/*: any*/) - }, - (v10/*: any*/) - ] - } - }, - (v21/*: any*/) - ] - } - }, - (v22/*: any*/), - (v13/*: any*/) - ] - } - }, - (v13/*: any*/) - ] - } - }, - { - "kind": "FragmentDefinition", - "name": (v20/*: any*/), - "typeCondition": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Todo" - } - }, - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v13/*: any*/), - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "description" - } - }, - (v19/*: any*/), - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "someOtherField" - }, - "directives": [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "include" - }, - "arguments": [ - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "if" - }, - "value": (v4/*: any*/) - } - ] - } - ] - } - ] - } - } - ] - }, - "watchQueryDocument": { - "kind": "Document", - "definitions": [ - { - "kind": "OperationDefinition", - "operation": "query", - "name": (v0/*: any*/), - "variableDefinitions": (v7/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v8/*: any*/), - "arguments": (v9/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v10/*: any*/), - (v12/*: any*/), - (v13/*: any*/), - (v23/*: any*/) - ] - } - } - ] - } - }, - { - "kind": "FragmentDefinition", - "name": (v11/*: any*/), - "typeCondition": (v14/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v10/*: any*/), - { - "kind": "Field", - "name": (v15/*: any*/), - "arguments": (v16/*: any*/), - "directives": (v17/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v18/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v8/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v13/*: any*/), - (v19/*: any*/), - (v10/*: any*/), - (v23/*: any*/) - ] - } - }, - (v21/*: any*/) - ] - } - }, - (v22/*: any*/), - (v13/*: any*/) - ] - } - }, - (v13/*: any*/) - ] - } - } - ] - }, - "metadata": { - "rootSelection": "node", - "mainFragment": { - "name": "TodoList_nodeFragment_2QE1um", - "typeCondition": "NodeWithTodos" - }, - "connection": { - "selectionPath": [ - "todos" - ], - "forwardCountVariable": "count", - "forwardCursorVariable": "after" - } - } -}; -})(); - -export default documents; \ No newline at end of file diff --git a/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeFragment.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeFragment.graphql.ts index 6cfeb1d58..0fb594fac 100644 --- a/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeFragment.graphql.ts +++ b/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeFragment.graphql.ts @@ -5,6 +5,7 @@ import { FragmentRefs } from "@graphitation/apollo-react-relay-duct-tape"; export type TodoList_nodeFragment = { readonly __typename: string; + readonly id: string; readonly todos: { readonly edges: ReadonlyArray<{ readonly node: { @@ -14,7 +15,6 @@ export type TodoList_nodeFragment = { }; }>; }; - readonly id: string; readonly " $refType": "TodoList_nodeFragment"; }; export type TodoList_nodeFragment$data = TodoList_nodeFragment; @@ -24,5 +24,5 @@ export type TodoList_nodeFragment$key = { }; -import { documents } from "./TodoListPaginationQuery.graphql"; +import { documents } from "./TodoList_nodeWatchNodeQuery.graphql"; export default documents; \ No newline at end of file diff --git a/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts new file mode 100644 index 000000000..82ae87d52 --- /dev/null +++ b/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts @@ -0,0 +1,298 @@ +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +/* +query TodoList_nodeWatchNodeQuery($after: String! = "", $first: Int! = 5, $id: ID!) { + node(id: $id) { + __typename + ...TodoList_nodeFragment_2HEEH6 + id + ... on Node { + __fragments @client + } + } +} + +fragment TodoList_nodeFragment_2HEEH6 on NodeWithTodos { + __isNodeWithTodos: __typename + __typename + id + todos(first: $first, after: $after) { + edges { + node { + id + isCompleted + ... on Node { + __fragments @client + } + } + } + id + } +} +*/ + +export const documents: import("@graphitation/apollo-react-relay-duct-tape-compiler").CompiledArtefactModule = (function(){ +var v0 = { + "kind": "Name", + "value": "after" +}, +v1 = { + "kind": "Variable", + "name": (v0/*: any*/) +}, +v2 = { + "kind": "Name", + "value": "first" +}, +v3 = { + "kind": "Variable", + "name": (v2/*: any*/) +}, +v4 = { + "kind": "Name", + "value": "id" +}, +v5 = { + "kind": "Variable", + "name": (v4/*: any*/) +}, +v6 = { + "kind": "Name", + "value": "node" +}, +v7 = { + "kind": "Name", + "value": "__typename" +}, +v8 = { + "kind": "Field", + "name": (v7/*: any*/) +}, +v9 = { + "kind": "Name", + "value": "TodoList_nodeFragment_2HEEH6" +}, +v10 = { + "kind": "Field", + "name": (v4/*: any*/) +}, +v11 = { + "kind": "InlineFragment", + "typeCondition": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "Node" + } + }, + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "__fragments" + }, + "directives": [ + { + "kind": "Directive", + "name": { + "kind": "Name", + "value": "client" + } + } + ] + } + ] + } +}; +return { + "watchQueryDocument": { + "kind": "Document", + "definitions": [ + { + "kind": "OperationDefinition", + "operation": "query", + "name": { + "kind": "Name", + "value": "TodoList_nodeWatchNodeQuery" + }, + "variableDefinitions": [ + { + "kind": "VariableDefinition", + "variable": (v1/*: any*/), + "type": { + "kind": "NonNullType", + "type": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "String" + } + } + }, + "defaultValue": { + "kind": "StringValue", + "value": "", + "block": false + } + }, + { + "kind": "VariableDefinition", + "variable": (v3/*: any*/), + "type": { + "kind": "NonNullType", + "type": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "Int" + } + } + }, + "defaultValue": { + "kind": "IntValue", + "value": "5" + } + }, + { + "kind": "VariableDefinition", + "variable": (v5/*: any*/), + "type": { + "kind": "NonNullType", + "type": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "ID" + } + } + } + } + ], + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": (v6/*: any*/), + "arguments": [ + { + "kind": "Argument", + "name": (v4/*: any*/), + "value": (v5/*: any*/) + } + ], + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + (v8/*: any*/), + { + "kind": "FragmentSpread", + "name": (v9/*: any*/) + }, + (v10/*: any*/), + (v11/*: any*/) + ] + } + } + ] + } + }, + { + "kind": "FragmentDefinition", + "name": (v9/*: any*/), + "typeCondition": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "NodeWithTodos" + } + }, + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "alias": { + "kind": "Name", + "value": "__isNodeWithTodos" + }, + "name": (v7/*: any*/) + }, + (v8/*: any*/), + (v10/*: any*/), + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "todos" + }, + "arguments": [ + { + "kind": "Argument", + "name": (v2/*: any*/), + "value": (v3/*: any*/) + }, + { + "kind": "Argument", + "name": (v0/*: any*/), + "value": (v1/*: any*/) + } + ], + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "edges" + }, + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": (v6/*: any*/), + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + (v10/*: any*/), + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "isCompleted" + } + }, + (v11/*: any*/) + ] + } + } + ] + } + }, + (v10/*: any*/) + ] + } + } + ] + } + } + ] + }, + "metadata": { + "rootSelection": "node", + "mainFragment": { + "name": "TodoList_nodeFragment_2HEEH6", + "typeCondition": "NodeWithTodos" + } + } +}; +})(); + +export default documents; \ No newline at end of file diff --git a/examples/apollo-watch-fragments/src/__generated__/TodoRefetchQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/TodoRefetchQuery.graphql.ts deleted file mode 100644 index 9ef852fcc..000000000 --- a/examples/apollo-watch-fragments/src/__generated__/TodoRefetchQuery.graphql.ts +++ /dev/null @@ -1,294 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// @ts-nocheck - -import { FragmentRefs } from "@graphitation/apollo-react-relay-duct-tape"; -export type TodoRefetchQueryVariables = { - includeSomeOtherField?: boolean | null | undefined; - id: string; -}; -export type TodoRefetchQueryResponse = { - readonly node: { - readonly " $fragmentRefs": FragmentRefs<"Todo_todoFragment">; - } | null; -}; -export type TodoRefetchQuery = { - readonly response: TodoRefetchQueryResponse; - readonly variables: TodoRefetchQueryVariables; -}; - - -/* -query TodoRefetchQuery($includeSomeOtherField: Boolean, $id: ID!) { - node(id: $id) { - __typename - ...Todo_todoFragment - id - } -} - -fragment Todo_todoFragment on Todo { - id - description - isCompleted - someOtherField @include(if: $includeSomeOtherField) -} -*/ - -/* -query TodoRefetchQuery($includeSomeOtherField: Boolean, $id: ID!) { - node(id: $id) { - __typename - ...Todo_todoFragment - id - ... on Node { - __fragments @client - } - } -} - -fragment Todo_todoFragment on Todo { - id - description - isCompleted - someOtherField @include(if: $includeSomeOtherField) -} -*/ - -export const documents: import("@graphitation/apollo-react-relay-duct-tape-compiler").CompiledArtefactModule = (function(){ -var v0 = { - "kind": "Name", - "value": "TodoRefetchQuery" -}, -v1 = { - "kind": "Variable", - "name": { - "kind": "Name", - "value": "includeSomeOtherField" - } -}, -v2 = { - "kind": "Name", - "value": "id" -}, -v3 = { - "kind": "Variable", - "name": (v2/*: any*/) -}, -v4 = [ - { - "kind": "VariableDefinition", - "variable": (v1/*: any*/), - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Boolean" - } - } - }, - { - "kind": "VariableDefinition", - "variable": (v3/*: any*/), - "type": { - "kind": "NonNullType", - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "ID" - } - } - } - } -], -v5 = { - "kind": "Name", - "value": "node" -}, -v6 = [ - { - "kind": "Argument", - "name": (v2/*: any*/), - "value": (v3/*: any*/) - } -], -v7 = { - "kind": "Field", - "name": { - "kind": "Name", - "value": "__typename" - } -}, -v8 = { - "kind": "Name", - "value": "Todo_todoFragment" -}, -v9 = { - "kind": "FragmentSpread", - "name": (v8/*: any*/) -}, -v10 = { - "kind": "Field", - "name": (v2/*: any*/) -}, -v11 = { - "kind": "FragmentDefinition", - "name": (v8/*: any*/), - "typeCondition": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Todo" - } - }, - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v10/*: any*/), - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "description" - } - }, - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "isCompleted" - } - }, - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "someOtherField" - }, - "directives": [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "include" - }, - "arguments": [ - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "if" - }, - "value": (v1/*: any*/) - } - ] - } - ] - } - ] - } -}; -return { - "executionQueryDocument": { - "kind": "Document", - "definitions": [ - { - "kind": "OperationDefinition", - "operation": "query", - "name": (v0/*: any*/), - "variableDefinitions": (v4/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v5/*: any*/), - "arguments": (v6/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v7/*: any*/), - (v9/*: any*/), - (v10/*: any*/) - ] - } - } - ] - } - }, - (v11/*: any*/) - ] - }, - "watchQueryDocument": { - "kind": "Document", - "definitions": [ - { - "kind": "OperationDefinition", - "operation": "query", - "name": (v0/*: any*/), - "variableDefinitions": (v4/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": (v5/*: any*/), - "arguments": (v6/*: any*/), - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - (v7/*: any*/), - (v9/*: any*/), - (v10/*: any*/), - { - "kind": "InlineFragment", - "typeCondition": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Node" - } - }, - "selectionSet": { - "kind": "SelectionSet", - "selections": [ - { - "kind": "Field", - "name": { - "kind": "Name", - "value": "__fragments" - }, - "directives": [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "client" - } - } - ] - } - ] - } - } - ] - } - } - ] - } - }, - (v11/*: any*/) - ] - }, - "metadata": { - "rootSelection": "node", - "mainFragment": { - "name": "Todo_todoFragment", - "typeCondition": "Todo" - } - } -}; -})(); - -export default documents; \ No newline at end of file diff --git a/examples/apollo-watch-fragments/src/__generated__/Todo_todoFragment.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/Todo_todoFragment.graphql.ts index ae18b567d..f1f94c867 100644 --- a/examples/apollo-watch-fragments/src/__generated__/Todo_todoFragment.graphql.ts +++ b/examples/apollo-watch-fragments/src/__generated__/Todo_todoFragment.graphql.ts @@ -7,7 +7,7 @@ export type Todo_todoFragment = { readonly id: string; readonly description: string; readonly isCompleted: boolean; - readonly someOtherField?: string | undefined; + readonly someOtherField: string; readonly " $refType": "Todo_todoFragment"; }; export type Todo_todoFragment$data = Todo_todoFragment; @@ -17,5 +17,5 @@ export type Todo_todoFragment$key = { }; -import { documents } from "./TodoRefetchQuery.graphql"; +import { documents } from "./Todo_todoWatchNodeQuery.graphql"; export default documents; \ No newline at end of file diff --git a/examples/apollo-watch-fragments/src/__generated__/Todo_todoWatchNodeQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/Todo_todoWatchNodeQuery.graphql.ts new file mode 100644 index 000000000..5b5b00118 --- /dev/null +++ b/examples/apollo-watch-fragments/src/__generated__/Todo_todoWatchNodeQuery.graphql.ts @@ -0,0 +1,187 @@ +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +/* +query Todo_todoWatchNodeQuery($id: ID!) { + node(id: $id) { + __typename + ...Todo_todoFragment + id + ... on Node { + __fragments @client + } + } +} + +fragment Todo_todoFragment on Todo { + id + description + isCompleted + someOtherField +} +*/ + +export const documents: import("@graphitation/apollo-react-relay-duct-tape-compiler").CompiledArtefactModule = (function(){ +var v0 = { + "kind": "Name", + "value": "id" +}, +v1 = { + "kind": "Variable", + "name": (v0/*: any*/) +}, +v2 = { + "kind": "Name", + "value": "Todo_todoFragment" +}, +v3 = { + "kind": "Field", + "name": (v0/*: any*/) +}; +return { + "watchQueryDocument": { + "kind": "Document", + "definitions": [ + { + "kind": "OperationDefinition", + "operation": "query", + "name": { + "kind": "Name", + "value": "Todo_todoWatchNodeQuery" + }, + "variableDefinitions": [ + { + "kind": "VariableDefinition", + "variable": (v1/*: any*/), + "type": { + "kind": "NonNullType", + "type": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "ID" + } + } + } + } + ], + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "node" + }, + "arguments": [ + { + "kind": "Argument", + "name": (v0/*: any*/), + "value": (v1/*: any*/) + } + ], + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "__typename" + } + }, + { + "kind": "FragmentSpread", + "name": (v2/*: any*/) + }, + (v3/*: any*/), + { + "kind": "InlineFragment", + "typeCondition": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "Node" + } + }, + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "__fragments" + }, + "directives": [ + { + "kind": "Directive", + "name": { + "kind": "Name", + "value": "client" + } + } + ] + } + ] + } + } + ] + } + } + ] + } + }, + { + "kind": "FragmentDefinition", + "name": (v2/*: any*/), + "typeCondition": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "Todo" + } + }, + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + (v3/*: any*/), + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "description" + } + }, + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "isCompleted" + } + }, + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "someOtherField" + } + } + ] + } + } + ] + }, + "metadata": { + "rootSelection": "node", + "mainFragment": { + "name": "Todo_todoFragment", + "typeCondition": "Todo" + } + } +}; +})(); + +export default documents; \ No newline at end of file diff --git a/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts b/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts index 4cd9699de..7fe8a25cd 100644 --- a/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts +++ b/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts @@ -66,12 +66,12 @@ export function useCompiledFragment( const result = observableQuery.getCurrentResult(); let data = result.data; - if (metadata?.rootSelection) { + if (metadata?.rootSelection && !result.loading && data) { data = data[metadata.rootSelection]; } - invariant( - data, - "useFragment(): Expected Apollo to respond with previously seeded data of the execution query document", - ); + // invariant( + // data, + // "useFragment(): Expected Apollo to respond with previously seeded data of the execution query document", + // ); return data; } diff --git a/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts b/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts index db3d82c01..75a806eca 100644 --- a/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts +++ b/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts @@ -4,9 +4,16 @@ export const fragmentReferencesFieldPolicy: FieldReadFunction = ( _existingCacheData, { variables }, ) => { - return !variables - ? null - : variables.__fragments === undefined - ? variables - : variables.__fragments; + if (!variables) { + return null; + } + + if (variables.__fragments === undefined) { + if (variables.id) { + return { id: variables.id }; + } + return {}; + } + + return variables.__fragments; }; From a1235e3907dd52950aad7686c276dc28f7c620e2 Mon Sep 17 00:00:00 2001 From: "EUROPE\\dragoshomner" Date: Thu, 26 Oct 2023 20:03:09 +0200 Subject: [PATCH 2/3] make it work --- .../apollo-watch-fragments/src/TodoList.tsx | 8 +- .../src/__generated__/AppQuery.graphql.ts | 87 +++++++------- .../TodoList_nodeWatchNodeQuery.graphql.ts | 106 +++++++----------- .../compiledHooks/useCompiledFragment.ts | 10 +- .../fragmentReferencesFieldPolicy.ts | 8 +- 5 files changed, 90 insertions(+), 129 deletions(-) diff --git a/examples/apollo-watch-fragments/src/TodoList.tsx b/examples/apollo-watch-fragments/src/TodoList.tsx index f226fb0f0..250f15776 100644 --- a/examples/apollo-watch-fragments/src/TodoList.tsx +++ b/examples/apollo-watch-fragments/src/TodoList.tsx @@ -16,14 +16,10 @@ const TodoList: React.FC<{ node: TodoList_nodeFragment$key, refetch: () => void }) => { const node = useFragment( graphql` - fragment TodoList_nodeFragment on NodeWithTodos - @argumentDefinitions( - first: { type: "Int!", defaultValue: 5 } - after: { type: "String!", defaultValue: "" } - ) { + fragment TodoList_nodeFragment on NodeWithTodos { __typename id - todos(first: $first, after: $after) { + todos(first: 5, after: $after) { edges { node { id diff --git a/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts index 26af027ce..c83034c65 100644 --- a/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts +++ b/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts @@ -44,7 +44,7 @@ fragment TodoList_nodeFragment on NodeWithTodos { __isNodeWithTodos: __typename __typename id - todos(first: 5, after: "") { + todos(first: 5, after: $after) { edges { node { id @@ -124,7 +124,12 @@ v7 = { "kind": "Name", "value": "first" }, -v8 = [ +v8 = { + "kind": "Argument", + "name": (v1/*: any*/), + "value": (v2/*: any*/) +}, +v9 = [ { "kind": "Argument", "name": (v7/*: any*/), @@ -133,50 +138,46 @@ v8 = [ "value": "0" } }, - { - "kind": "Argument", - "name": (v1/*: any*/), - "value": (v2/*: any*/) - } + (v8/*: any*/) ], -v9 = { +v10 = { "kind": "Field", "name": { "kind": "Name", "value": "id" } }, -v10 = { +v11 = { "kind": "Field", "name": { "kind": "Name", "value": "totalCount" } }, -v11 = { +v12 = { "kind": "Name", "value": "TodoListFooter_todosFragment" }, -v12 = { +v13 = { "kind": "Name", "value": "TodoList_nodeFragment" }, -v13 = { +v14 = { "kind": "Name", "value": "__typename" }, -v14 = { +v15 = { "kind": "Field", "name": { "kind": "Name", "value": "isCompleted" } }, -v15 = { +v16 = { "kind": "Name", "value": "Todo_todoFragment" }, -v16 = { +v17 = { "kind": "InlineFragment", "typeCondition": { "kind": "NamedType", @@ -229,24 +230,24 @@ return { "kind": "Field", "alias": (v5/*: any*/), "name": (v6/*: any*/), - "arguments": (v8/*: any*/), + "arguments": (v9/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ - (v9/*: any*/), (v10/*: any*/), + (v11/*: any*/), { "kind": "FragmentSpread", - "name": (v11/*: any*/) + "name": (v12/*: any*/) } ] } }, { "kind": "FragmentSpread", - "name": (v12/*: any*/) + "name": (v13/*: any*/) }, - (v9/*: any*/) + (v10/*: any*/) ] } } @@ -255,7 +256,7 @@ return { }, { "kind": "FragmentDefinition", - "name": (v11/*: any*/), + "name": (v12/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -273,13 +274,13 @@ return { "value": "uncompletedCount" } }, - (v9/*: any*/) + (v10/*: any*/) ] } }, { "kind": "FragmentDefinition", - "name": (v12/*: any*/), + "name": (v13/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -296,13 +297,13 @@ return { "kind": "Name", "value": "__isNodeWithTodos" }, - "name": (v13/*: any*/) + "name": (v14/*: any*/) }, { "kind": "Field", - "name": (v13/*: any*/) + "name": (v14/*: any*/) }, - (v9/*: any*/), + (v10/*: any*/), { "kind": "Field", "name": (v6/*: any*/), @@ -315,15 +316,7 @@ return { "value": "5" } }, - { - "kind": "Argument", - "name": (v1/*: any*/), - "value": { - "kind": "StringValue", - "value": "", - "block": false - } - } + (v8/*: any*/) ], "selectionSet": { "kind": "SelectionSet", @@ -346,11 +339,11 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v9/*: any*/), - (v14/*: any*/), + (v10/*: any*/), + (v15/*: any*/), { "kind": "FragmentSpread", - "name": (v15/*: any*/) + "name": (v16/*: any*/) } ] } @@ -358,7 +351,7 @@ return { ] } }, - (v9/*: any*/) + (v10/*: any*/) ] } } @@ -367,7 +360,7 @@ return { }, { "kind": "FragmentDefinition", - "name": (v15/*: any*/), + "name": (v16/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -378,7 +371,7 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v9/*: any*/), + (v10/*: any*/), { "kind": "Field", "name": { @@ -386,7 +379,7 @@ return { "value": "description" } }, - (v14/*: any*/), + (v15/*: any*/), { "kind": "Field", "name": { @@ -420,18 +413,18 @@ return { "kind": "Field", "alias": (v5/*: any*/), "name": (v6/*: any*/), - "arguments": (v8/*: any*/), + "arguments": (v9/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ - (v9/*: any*/), (v10/*: any*/), - (v16/*: any*/) + (v11/*: any*/), + (v17/*: any*/) ] } }, - (v9/*: any*/), - (v16/*: any*/) + (v10/*: any*/), + (v17/*: any*/) ] } } diff --git a/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts index 82ae87d52..daa01fae6 100644 --- a/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts +++ b/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts @@ -3,10 +3,10 @@ // @ts-nocheck /* -query TodoList_nodeWatchNodeQuery($after: String! = "", $first: Int! = 5, $id: ID!) { +query TodoList_nodeWatchNodeQuery($after: String, $id: ID!) { node(id: $id) { __typename - ...TodoList_nodeFragment_2HEEH6 + ...TodoList_nodeFragment id ... on Node { __fragments @client @@ -14,11 +14,11 @@ query TodoList_nodeWatchNodeQuery($after: String! = "", $first: Int! = 5, $id: I } } -fragment TodoList_nodeFragment_2HEEH6 on NodeWithTodos { +fragment TodoList_nodeFragment on NodeWithTodos { __isNodeWithTodos: __typename __typename id - todos(first: $first, after: $after) { + todos(first: 5, after: $after) { edges { node { id @@ -44,7 +44,7 @@ v1 = { }, v2 = { "kind": "Name", - "value": "first" + "value": "id" }, v3 = { "kind": "Variable", @@ -52,33 +52,25 @@ v3 = { }, v4 = { "kind": "Name", - "value": "id" + "value": "node" }, v5 = { - "kind": "Variable", - "name": (v4/*: any*/) + "kind": "Name", + "value": "__typename" }, v6 = { - "kind": "Name", - "value": "node" + "kind": "Field", + "name": (v5/*: any*/) }, v7 = { "kind": "Name", - "value": "__typename" + "value": "TodoList_nodeFragment" }, v8 = { "kind": "Field", - "name": (v7/*: any*/) + "name": (v2/*: any*/) }, v9 = { - "kind": "Name", - "value": "TodoList_nodeFragment_2HEEH6" -}, -v10 = { - "kind": "Field", - "name": (v4/*: any*/) -}, -v11 = { "kind": "InlineFragment", "typeCondition": { "kind": "NamedType", @@ -125,42 +117,16 @@ return { "kind": "VariableDefinition", "variable": (v1/*: any*/), "type": { - "kind": "NonNullType", - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "String" - } + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "String" } - }, - "defaultValue": { - "kind": "StringValue", - "value": "", - "block": false } }, { "kind": "VariableDefinition", "variable": (v3/*: any*/), - "type": { - "kind": "NonNullType", - "type": { - "kind": "NamedType", - "name": { - "kind": "Name", - "value": "Int" - } - } - }, - "defaultValue": { - "kind": "IntValue", - "value": "5" - } - }, - { - "kind": "VariableDefinition", - "variable": (v5/*: any*/), "type": { "kind": "NonNullType", "type": { @@ -178,24 +144,24 @@ return { "selections": [ { "kind": "Field", - "name": (v6/*: any*/), + "name": (v4/*: any*/), "arguments": [ { "kind": "Argument", - "name": (v4/*: any*/), - "value": (v5/*: any*/) + "name": (v2/*: any*/), + "value": (v3/*: any*/) } ], "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), + (v6/*: any*/), { "kind": "FragmentSpread", - "name": (v9/*: any*/) + "name": (v7/*: any*/) }, - (v10/*: any*/), - (v11/*: any*/) + (v8/*: any*/), + (v9/*: any*/) ] } } @@ -204,7 +170,7 @@ return { }, { "kind": "FragmentDefinition", - "name": (v9/*: any*/), + "name": (v7/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -221,10 +187,10 @@ return { "kind": "Name", "value": "__isNodeWithTodos" }, - "name": (v7/*: any*/) + "name": (v5/*: any*/) }, + (v6/*: any*/), (v8/*: any*/), - (v10/*: any*/), { "kind": "Field", "name": { @@ -234,8 +200,14 @@ return { "arguments": [ { "kind": "Argument", - "name": (v2/*: any*/), - "value": (v3/*: any*/) + "name": { + "kind": "Name", + "value": "first" + }, + "value": { + "kind": "IntValue", + "value": "5" + } }, { "kind": "Argument", @@ -257,11 +229,11 @@ return { "selections": [ { "kind": "Field", - "name": (v6/*: any*/), + "name": (v4/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ - (v10/*: any*/), + (v8/*: any*/), { "kind": "Field", "name": { @@ -269,14 +241,14 @@ return { "value": "isCompleted" } }, - (v11/*: any*/) + (v9/*: any*/) ] } } ] } }, - (v10/*: any*/) + (v8/*: any*/) ] } } @@ -288,7 +260,7 @@ return { "metadata": { "rootSelection": "node", "mainFragment": { - "name": "TodoList_nodeFragment_2HEEH6", + "name": "TodoList_nodeFragment", "typeCondition": "NodeWithTodos" } } diff --git a/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts b/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts index 7fe8a25cd..4cd9699de 100644 --- a/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts +++ b/packages/apollo-react-relay-duct-tape/src/storeObservation/compiledHooks/useCompiledFragment.ts @@ -66,12 +66,12 @@ export function useCompiledFragment( const result = observableQuery.getCurrentResult(); let data = result.data; - if (metadata?.rootSelection && !result.loading && data) { + if (metadata?.rootSelection) { data = data[metadata.rootSelection]; } - // invariant( - // data, - // "useFragment(): Expected Apollo to respond with previously seeded data of the execution query document", - // ); + invariant( + data, + "useFragment(): Expected Apollo to respond with previously seeded data of the execution query document", + ); return data; } diff --git a/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts b/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts index 75a806eca..fa9e52ab3 100644 --- a/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts +++ b/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts @@ -9,10 +9,10 @@ export const fragmentReferencesFieldPolicy: FieldReadFunction = ( } if (variables.__fragments === undefined) { - if (variables.id) { - return { id: variables.id }; - } - return {}; + // if (variables.id) { + // return { id: variables.id }; + // } + return variables; } return variables.__fragments; From 8b16cdaa5709d98ffced7f5b502947b5f3825a2c Mon Sep 17 00:00:00 2001 From: "EUROPE\\dragoshomner" Date: Mon, 30 Oct 2023 20:13:49 +0100 Subject: [PATCH 3/3] add commnets --- examples/apollo-watch-fragments/src/App.tsx | 6 ++++++ examples/apollo-watch-fragments/src/Todo.tsx | 4 ++++ .../src/storeObservation/fragmentReferencesFieldPolicy.ts | 1 + 3 files changed, 11 insertions(+) diff --git a/examples/apollo-watch-fragments/src/App.tsx b/examples/apollo-watch-fragments/src/App.tsx index de92b680e..3122616ca 100644 --- a/examples/apollo-watch-fragments/src/App.tsx +++ b/examples/apollo-watch-fragments/src/App.tsx @@ -11,8 +11,12 @@ 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( graphql` query AppQuery($after: String) { @@ -29,6 +33,8 @@ const App: React.FC = () => { 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", diff --git a/examples/apollo-watch-fragments/src/Todo.tsx b/examples/apollo-watch-fragments/src/Todo.tsx index e2bafcd25..39d3e3be1 100644 --- a/examples/apollo-watch-fragments/src/Todo.tsx +++ b/examples/apollo-watch-fragments/src/Todo.tsx @@ -11,6 +11,9 @@ import useChangeTodoStatusMutation from "./useChangeTodoStatusMutation"; import { Todo_todoFragment$key } from "./__generated__/Todo_todoFragment.graphql"; 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 { @@ -34,6 +37,7 @@ const Todo: React.FC<{ todo: Todo_todoFragment$key; refetch: () => void }> = ({ ); const refresh = useCallback(() => { + // Keep it simple, remove the parameters refetch(); }, [refetch]); diff --git a/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts b/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts index fa9e52ab3..4ea42ad53 100644 --- a/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts +++ b/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts @@ -1,5 +1,6 @@ import { FieldReadFunction } from "@apollo/client"; +// Nothing changes, I tried to play with the id, but it didn't work export const fragmentReferencesFieldPolicy: FieldReadFunction = ( _existingCacheData, { variables },