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..3122616ca 100644 --- a/examples/apollo-watch-fragments/src/App.tsx +++ b/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( 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 = () => {
- +
{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..39d3e3be1 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,17 @@ 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 ( diff --git a/examples/apollo-watch-fragments/src/TodoList.tsx b/examples/apollo-watch-fragments/src/TodoList.tsx index a8c1e2f8a..250f15776 100644 --- a/examples/apollo-watch-fragments/src/TodoList.tsx +++ b/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 }> = ({ /* */ return ( ); }; diff --git a/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts b/examples/apollo-watch-fragments/src/__generated__/AppQuery.graphql.ts index ff902b6d6..c83034c65 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: $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,96 @@ 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": (v1/*: any*/), + "value": (v2/*: any*/) +}, +v9 = [ { "kind": "Argument", - "name": (v6/*: any*/), + "name": (v7/*: any*/), "value": { "kind": "IntValue", "value": "0" } - } + }, + (v8/*: any*/) ], -v8 = { +v10 = { "kind": "Field", "name": { "kind": "Name", "value": "id" } }, -v9 = { +v11 = { "kind": "Field", "name": { "kind": "Name", "value": "totalCount" } }, -v10 = { +v12 = { "kind": "Name", "value": "TodoListFooter_todosFragment" }, -v11 = { +v13 = { "kind": "Name", "value": "TodoList_nodeFragment" }, -v12 = { - "kind": "Field", - "name": { - "kind": "Name", - "value": "__typename" - } +v14 = { + "kind": "Name", + "value": "__typename" }, -v13 = { +v15 = { "kind": "Field", "name": { "kind": "Name", "value": "isCompleted" } }, -v14 = { +v16 = { "kind": "Name", "value": "Todo_todoFragment" }, -v15 = { +v17 = { "kind": "InlineFragment", "typeCondition": { "kind": "NamedType", @@ -220,38 +216,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": (v9/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), - (v9/*: any*/), + (v10/*: any*/), + (v11/*: any*/), { "kind": "FragmentSpread", - "name": (v10/*: any*/) + "name": (v12/*: any*/) } ] } }, { "kind": "FragmentSpread", - "name": (v11/*: any*/) + "name": (v13/*: any*/) }, - (v8/*: any*/) + (v10/*: any*/) ] } } @@ -260,7 +256,7 @@ return { }, { "kind": "FragmentDefinition", - "name": (v10/*: any*/), + "name": (v12/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -278,13 +274,13 @@ return { "value": "uncompletedCount" } }, - (v8/*: any*/) + (v10/*: any*/) ] } }, { "kind": "FragmentDefinition", - "name": (v11/*: any*/), + "name": (v13/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -295,54 +291,32 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v12/*: any*/), { "kind": "Field", - "name": (v5/*: any*/), + "alias": { + "kind": "Name", + "value": "__isNodeWithTodos" + }, + "name": (v14/*: any*/) + }, + { + "kind": "Field", + "name": (v14/*: any*/) + }, + (v10/*: any*/), + { + "kind": "Field", + "name": (v6/*: any*/), "arguments": [ { "kind": "Argument", - "name": (v6/*: any*/), + "name": (v7/*: any*/), "value": { "kind": "IntValue", "value": "5" } }, - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "after" - }, - "value": { - "kind": "StringValue", - "value": "", - "block": false - } - } - ], - "directives": [ - { - "kind": "Directive", - "name": { - "kind": "Name", - "value": "connection" - }, - "arguments": [ - { - "kind": "Argument", - "name": { - "kind": "Name", - "value": "key" - }, - "value": { - "kind": "StringValue", - "value": "TodosList_todos", - "block": false - } - } - ] - } + (v8/*: any*/) ], "selectionSet": { "kind": "SelectionSet", @@ -365,63 +339,28 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), - (v13/*: any*/), + (v10/*: any*/), + (v15/*: any*/), { "kind": "FragmentSpread", - "name": (v14/*: any*/) - }, - (v12/*: any*/) + "name": (v16/*: 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*/) + (v10/*: any*/) ] } - }, - (v8/*: any*/) + } ] } }, { "kind": "FragmentDefinition", - "name": (v14/*: any*/), + "name": (v16/*: any*/), "typeCondition": { "kind": "NamedType", "name": { @@ -432,7 +371,7 @@ return { "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), + (v10/*: any*/), { "kind": "Field", "name": { @@ -440,32 +379,13 @@ return { "value": "description" } }, - (v13/*: any*/), + (v15/*: 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 +399,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": (v9/*: any*/), "selectionSet": { "kind": "SelectionSet", "selections": [ - (v8/*: any*/), - (v9/*: any*/), - (v15/*: any*/) + (v10/*: any*/), + (v11/*: any*/), + (v17/*: any*/) ] } }, - (v8/*: any*/), - (v15/*: any*/) + (v10/*: any*/), + (v17/*: 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..daa01fae6 --- /dev/null +++ b/examples/apollo-watch-fragments/src/__generated__/TodoList_nodeWatchNodeQuery.graphql.ts @@ -0,0 +1,270 @@ +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +/* +query TodoList_nodeWatchNodeQuery($after: String, $id: ID!) { + node(id: $id) { + __typename + ...TodoList_nodeFragment + id + ... on Node { + __fragments @client + } + } +} + +fragment TodoList_nodeFragment on NodeWithTodos { + __isNodeWithTodos: __typename + __typename + id + todos(first: 5, 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": "id" +}, +v3 = { + "kind": "Variable", + "name": (v2/*: any*/) +}, +v4 = { + "kind": "Name", + "value": "node" +}, +v5 = { + "kind": "Name", + "value": "__typename" +}, +v6 = { + "kind": "Field", + "name": (v5/*: any*/) +}, +v7 = { + "kind": "Name", + "value": "TodoList_nodeFragment" +}, +v8 = { + "kind": "Field", + "name": (v2/*: any*/) +}, +v9 = { + "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": "NamedType", + "name": { + "kind": "Name", + "value": "String" + } + } + }, + { + "kind": "VariableDefinition", + "variable": (v3/*: any*/), + "type": { + "kind": "NonNullType", + "type": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "ID" + } + } + } + } + ], + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "name": (v4/*: any*/), + "arguments": [ + { + "kind": "Argument", + "name": (v2/*: any*/), + "value": (v3/*: any*/) + } + ], + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + (v6/*: any*/), + { + "kind": "FragmentSpread", + "name": (v7/*: any*/) + }, + (v8/*: any*/), + (v9/*: any*/) + ] + } + } + ] + } + }, + { + "kind": "FragmentDefinition", + "name": (v7/*: any*/), + "typeCondition": { + "kind": "NamedType", + "name": { + "kind": "Name", + "value": "NodeWithTodos" + } + }, + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + { + "kind": "Field", + "alias": { + "kind": "Name", + "value": "__isNodeWithTodos" + }, + "name": (v5/*: any*/) + }, + (v6/*: any*/), + (v8/*: any*/), + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "todos" + }, + "arguments": [ + { + "kind": "Argument", + "name": { + "kind": "Name", + "value": "first" + }, + "value": { + "kind": "IntValue", + "value": "5" + } + }, + { + "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": (v4/*: any*/), + "selectionSet": { + "kind": "SelectionSet", + "selections": [ + (v8/*: any*/), + { + "kind": "Field", + "name": { + "kind": "Name", + "value": "isCompleted" + } + }, + (v9/*: any*/) + ] + } + } + ] + } + }, + (v8/*: any*/) + ] + } + } + ] + } + } + ] + }, + "metadata": { + "rootSelection": "node", + "mainFragment": { + "name": "TodoList_nodeFragment", + "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/fragmentReferencesFieldPolicy.ts b/packages/apollo-react-relay-duct-tape/src/storeObservation/fragmentReferencesFieldPolicy.ts index db3d82c01..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,12 +1,20 @@ 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 }, ) => { - 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 variables; + } + + return variables.__fragments; };