diff --git a/example-hooks/public/index.css b/example-hooks/public/index.css index b45de0d0..a46d9e38 100644 --- a/example-hooks/public/index.css +++ b/example-hooks/public/index.css @@ -246,6 +246,8 @@ label[for='toggle-all'] { height: 20px; text-align: center; border-top: 1px solid #e6e6e6; + display: grid; + grid-template-columns: 1fr 1fr 1fr; } .footer:before { @@ -263,9 +265,20 @@ label[for='toggle-all'] { 0 17px 2px -6px rgba(0, 0, 0, 0.2); } +.footer label { + align-content: center; + display: flex; + justify-self: center; + cursor: pointer; + position: relative; +} + +.footer label input { + cursor: pointer; +} + .todo-count { - float: left; - text-align: left; + justify-self: start; } .todo-count strong { @@ -304,11 +317,11 @@ label[for='toggle-all'] { .clear-completed, html .clear-completed:active { - float: right; position: relative; line-height: 20px; text-decoration: none; cursor: pointer; + justify-self: end; } .clear-completed:hover { diff --git a/example-hooks/ts/__relay_artifacts__/AddTodoMutation.graphql.ts b/example-hooks/ts/__relay_artifacts__/AddTodoMutation.graphql.ts index fb128208..671198eb 100644 --- a/example-hooks/ts/__relay_artifacts__/AddTodoMutation.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/AddTodoMutation.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ConcreteRequest } from "relay-runtime"; export type AddTodoInput = { @@ -7,10 +8,12 @@ export type AddTodoInput = { }; export type AddTodoMutationVariables = { input: AddTodoInput; + connections: Array; + append: boolean; }; export type AddTodoMutationResponse = { readonly addTodo: { - readonly todoEdge: { + readonly todoEdge?: { readonly __typename: string; readonly cursor: string; readonly node: { @@ -35,9 +38,19 @@ export type AddTodoMutation = { /* mutation AddTodoMutation( $input: AddTodoInput! + $append: Boolean! = true ) { addTodo(input: $input) { - todoEdge { + todoEdge @include(if: $append) { + __typename + cursor + node { + complete + id + text + } + } + todoEdge @skip(if: $append) { __typename cursor node { @@ -55,134 +68,223 @@ mutation AddTodoMutation( */ const node: ConcreteRequest = (function(){ -var v0 = [ +var v0 = { + "defaultValue": true, + "kind": "LocalArgument", + "name": "append" +}, +v1 = { + "defaultValue": null, + "kind": "LocalArgument", + "name": "connections" +}, +v2 = { + "defaultValue": null, + "kind": "LocalArgument", + "name": "input" +}, +v3 = [ { - "kind": "LocalArgument", + "kind": "Variable", "name": "input", - "type": "AddTodoInput!", - "defaultValue": null + "variableName": "input" } ], -v1 = { - "kind": "ScalarField", +v4 = { "alias": null, + "args": null, + "kind": "ScalarField", "name": "id", + "storageKey": null +}, +v5 = { + "alias": null, + "args": null, + "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", + "plural": false, + "selections": [ + (v4/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "totalCount", + "storageKey": null + } + ], + "storageKey": null +}, +v6 = { + "alias": null, "args": null, + "concreteType": "TodoEdge", + "kind": "LinkedField", + "name": "todoEdge", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "__typename", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "cursor", + "storageKey": null + }, + { + "alias": null, + "args": null, + "concreteType": "Todo", + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "complete", + "storageKey": null + }, + (v4/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "text", + "storageKey": null + } + ], + "storageKey": null + } + ], "storageKey": null }, -v2 = [ +v7 = [ + (v6/*: any*/) +], +v8 = [ { - "kind": "LinkedField", - "alias": null, - "name": "addTodo", - "storageKey": null, - "args": [ - { - "kind": "Variable", - "name": "input", - "variableName": "input" - } + "kind": "Variable", + "name": "connections", + "variableName": "connections" + } +]; +return { + "fragment": { + "argumentDefinitions": [ + (v0/*: any*/), + (v1/*: any*/), + (v2/*: any*/) ], - "concreteType": "AddTodoPayload", - "plural": false, + "kind": "Fragment", + "metadata": null, + "name": "AddTodoMutation", "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "todoEdge", - "storageKey": null, - "args": null, - "concreteType": "TodoEdge", + "args": (v3/*: any*/), + "concreteType": "AddTodoPayload", + "kind": "LinkedField", + "name": "addTodo", "plural": false, "selections": [ + (v5/*: any*/), { - "kind": "ScalarField", - "alias": null, - "name": "__typename", - "args": null, - "storageKey": null + "condition": "append", + "kind": "Condition", + "passingValue": true, + "selections": (v7/*: any*/) }, { - "kind": "ScalarField", - "alias": null, - "name": "cursor", - "args": null, - "storageKey": null - }, + "condition": "append", + "kind": "Condition", + "passingValue": false, + "selections": (v7/*: any*/) + } + ], + "storageKey": null + } + ], + "type": "Mutation", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": [ + (v2/*: any*/), + (v1/*: any*/), + (v0/*: any*/) + ], + "kind": "Operation", + "name": "AddTodoMutation", + "selections": [ + { + "alias": null, + "args": (v3/*: any*/), + "concreteType": "AddTodoPayload", + "kind": "LinkedField", + "name": "addTodo", + "plural": false, + "selections": [ + (v5/*: any*/), { - "kind": "LinkedField", - "alias": null, - "name": "node", - "storageKey": null, - "args": null, - "concreteType": "Todo", - "plural": false, + "condition": "append", + "kind": "Condition", + "passingValue": true, "selections": [ + (v6/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "complete", "args": null, - "storageKey": null - }, - (v1/*: any*/), + "filters": null, + "handle": "appendEdge", + "key": "", + "kind": "LinkedHandle", + "name": "todoEdge", + "handleArgs": (v8/*: any*/) + } + ] + }, + { + "condition": "append", + "kind": "Condition", + "passingValue": false, + "selections": [ + (v6/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "text", "args": null, - "storageKey": null + "filters": null, + "handle": "prependEdge", + "key": "", + "kind": "LinkedHandle", + "name": "todoEdge", + "handleArgs": (v8/*: any*/) } ] } - ] - }, - { - "kind": "LinkedField", - "alias": null, - "name": "viewer", - "storageKey": null, - "args": null, - "concreteType": "User", - "plural": false, - "selections": [ - (v1/*: any*/), - { - "kind": "ScalarField", - "alias": null, - "name": "totalCount", - "args": null, - "storageKey": null - } - ] + ], + "storageKey": null } ] - } -]; -return { - "kind": "Request", - "fragment": { - "kind": "Fragment", - "name": "AddTodoMutation", - "type": "Mutation", - "metadata": null, - "argumentDefinitions": (v0/*: any*/), - "selections": (v2/*: any*/) - }, - "operation": { - "kind": "Operation", - "name": "AddTodoMutation", - "argumentDefinitions": (v0/*: any*/), - "selections": (v2/*: any*/) }, "params": { - "operationKind": "mutation", - "name": "AddTodoMutation", + "cacheID": "45b1c0dd3f77cf2030614e989ba1a0ae", "id": null, - "text": "mutation AddTodoMutation(\n $input: AddTodoInput!\n) {\n addTodo(input: $input) {\n todoEdge {\n __typename\n cursor\n node {\n complete\n id\n text\n }\n }\n viewer {\n id\n totalCount\n }\n }\n}\n", - "metadata": {} + "metadata": {}, + "name": "AddTodoMutation", + "operationKind": "mutation", + "text": "mutation AddTodoMutation(\n $input: AddTodoInput!\n $append: Boolean! = true\n) {\n addTodo(input: $input) {\n todoEdge @include(if: $append) {\n __typename\n cursor\n node {\n complete\n id\n text\n }\n }\n todoEdge @skip(if: $append) {\n __typename\n cursor\n node {\n complete\n id\n text\n }\n }\n viewer {\n id\n totalCount\n }\n }\n}\n" } }; })(); -(node as any).hash = 'd83bc4fc4eabb0be2a540834905e9427'; +(node as any).hash = '22b4d5cbe974f454b465ed39d335191e'; export default node; diff --git a/example-hooks/ts/__relay_artifacts__/ChangeTodoStatusMutation.graphql.ts b/example-hooks/ts/__relay_artifacts__/ChangeTodoStatusMutation.graphql.ts index b9d3611d..de2cce7d 100644 --- a/example-hooks/ts/__relay_artifacts__/ChangeTodoStatusMutation.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/ChangeTodoStatusMutation.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ConcreteRequest } from "relay-runtime"; export type ChangeTodoStatusInput = { @@ -48,25 +49,21 @@ mutation ChangeTodoStatusMutation( const node: ConcreteRequest = (function(){ var v0 = [ { + "defaultValue": null, "kind": "LocalArgument", - "name": "input", - "type": "ChangeTodoStatusInput!", - "defaultValue": null + "name": "input" } ], v1 = { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }, v2 = [ { - "kind": "LinkedField", "alias": null, - "name": "changeTodoStatus", - "storageKey": null, "args": [ { "kind": "Variable", @@ -75,71 +72,76 @@ v2 = [ } ], "concreteType": "ChangeTodoStatusPayload", + "kind": "LinkedField", + "name": "changeTodoStatus", "plural": false, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "todo", - "storageKey": null, "args": null, "concreteType": "Todo", + "kind": "LinkedField", + "name": "todo", "plural": false, "selections": [ (v1/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "complete", "args": null, + "kind": "ScalarField", + "name": "complete", "storageKey": null } - ] + ], + "storageKey": null }, { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ (v1/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } ]; return { - "kind": "Request", "fragment": { + "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", + "metadata": null, "name": "ChangeTodoStatusMutation", + "selections": (v2/*: any*/), "type": "Mutation", - "metadata": null, - "argumentDefinitions": (v0/*: any*/), - "selections": (v2/*: any*/) + "abstractKey": null }, + "kind": "Request", "operation": { + "argumentDefinitions": (v0/*: any*/), "kind": "Operation", "name": "ChangeTodoStatusMutation", - "argumentDefinitions": (v0/*: any*/), "selections": (v2/*: any*/) }, "params": { - "operationKind": "mutation", - "name": "ChangeTodoStatusMutation", + "cacheID": "add8723f75323848b2de0e56f1e9e0d7", "id": null, - "text": "mutation ChangeTodoStatusMutation(\n $input: ChangeTodoStatusInput!\n) {\n changeTodoStatus(input: $input) {\n todo {\n id\n complete\n }\n viewer {\n id\n completedCount\n }\n }\n}\n", - "metadata": {} + "metadata": {}, + "name": "ChangeTodoStatusMutation", + "operationKind": "mutation", + "text": "mutation ChangeTodoStatusMutation(\n $input: ChangeTodoStatusInput!\n) {\n changeTodoStatus(input: $input) {\n todo {\n id\n complete\n }\n viewer {\n id\n completedCount\n }\n }\n}\n" } }; })(); diff --git a/example-hooks/ts/__relay_artifacts__/MarkAllTodosMutation.graphql.ts b/example-hooks/ts/__relay_artifacts__/MarkAllTodosMutation.graphql.ts index 5e4a7f3f..1d2be559 100644 --- a/example-hooks/ts/__relay_artifacts__/MarkAllTodosMutation.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/MarkAllTodosMutation.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ConcreteRequest } from "relay-runtime"; export type MarkAllTodosInput = { @@ -47,25 +48,21 @@ mutation MarkAllTodosMutation( const node: ConcreteRequest = (function(){ var v0 = [ { + "defaultValue": null, "kind": "LocalArgument", - "name": "input", - "type": "MarkAllTodosInput!", - "defaultValue": null + "name": "input" } ], v1 = { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }, v2 = [ { - "kind": "LinkedField", "alias": null, - "name": "markAllTodos", - "storageKey": null, "args": [ { "kind": "Variable", @@ -74,71 +71,76 @@ v2 = [ } ], "concreteType": "MarkAllTodosPayload", + "kind": "LinkedField", + "name": "markAllTodos", "plural": false, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "changedTodos", - "storageKey": null, "args": null, "concreteType": "Todo", + "kind": "LinkedField", + "name": "changedTodos", "plural": true, "selections": [ (v1/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "complete", "args": null, + "kind": "ScalarField", + "name": "complete", "storageKey": null } - ] + ], + "storageKey": null }, { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ (v1/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } ]; return { - "kind": "Request", "fragment": { + "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", + "metadata": null, "name": "MarkAllTodosMutation", + "selections": (v2/*: any*/), "type": "Mutation", - "metadata": null, - "argumentDefinitions": (v0/*: any*/), - "selections": (v2/*: any*/) + "abstractKey": null }, + "kind": "Request", "operation": { + "argumentDefinitions": (v0/*: any*/), "kind": "Operation", "name": "MarkAllTodosMutation", - "argumentDefinitions": (v0/*: any*/), "selections": (v2/*: any*/) }, "params": { - "operationKind": "mutation", - "name": "MarkAllTodosMutation", + "cacheID": "d46e7ec7a20692a47ac3fc3dfb222488", "id": null, - "text": "mutation MarkAllTodosMutation(\n $input: MarkAllTodosInput!\n) {\n markAllTodos(input: $input) {\n changedTodos {\n id\n complete\n }\n viewer {\n id\n completedCount\n }\n }\n}\n", - "metadata": {} + "metadata": {}, + "name": "MarkAllTodosMutation", + "operationKind": "mutation", + "text": "mutation MarkAllTodosMutation(\n $input: MarkAllTodosInput!\n) {\n markAllTodos(input: $input) {\n changedTodos {\n id\n complete\n }\n viewer {\n id\n completedCount\n }\n }\n}\n" } }; })(); diff --git a/example-hooks/ts/__relay_artifacts__/RemoveCompletedTodosMutation.graphql.ts b/example-hooks/ts/__relay_artifacts__/RemoveCompletedTodosMutation.graphql.ts index fc880236..fffbc32b 100644 --- a/example-hooks/ts/__relay_artifacts__/RemoveCompletedTodosMutation.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/RemoveCompletedTodosMutation.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ConcreteRequest } from "relay-runtime"; export type RemoveCompletedTodosInput = { @@ -41,10 +42,9 @@ mutation RemoveCompletedTodosMutation( const node: ConcreteRequest = (function(){ var v0 = [ { + "defaultValue": null, "kind": "LocalArgument", - "name": "input", - "type": "RemoveCompletedTodosInput!", - "defaultValue": null + "name": "input" } ], v1 = [ @@ -55,107 +55,109 @@ v1 = [ } ], v2 = { - "kind": "ScalarField", "alias": null, - "name": "deletedTodoIds", "args": null, + "kind": "ScalarField", + "name": "deletedTodoIds", "storageKey": null }, v3 = { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null }, v4 = { - "kind": "ScalarField", "alias": null, - "name": "totalCount", "args": null, + "kind": "ScalarField", + "name": "totalCount", "storageKey": null }; return { - "kind": "Request", "fragment": { + "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", - "name": "RemoveCompletedTodosMutation", - "type": "Mutation", "metadata": null, - "argumentDefinitions": (v0/*: any*/), + "name": "RemoveCompletedTodosMutation", "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "removeCompletedTodos", - "storageKey": null, "args": (v1/*: any*/), "concreteType": "RemoveCompletedTodosPayload", + "kind": "LinkedField", + "name": "removeCompletedTodos", "plural": false, "selections": [ (v2/*: any*/), { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ (v3/*: any*/), (v4/*: any*/) - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "type": "Mutation", + "abstractKey": null }, + "kind": "Request", "operation": { + "argumentDefinitions": (v0/*: any*/), "kind": "Operation", "name": "RemoveCompletedTodosMutation", - "argumentDefinitions": (v0/*: any*/), "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "removeCompletedTodos", - "storageKey": null, "args": (v1/*: any*/), "concreteType": "RemoveCompletedTodosPayload", + "kind": "LinkedField", + "name": "removeCompletedTodos", "plural": false, "selections": [ (v2/*: any*/), { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ (v3/*: any*/), (v4/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } ] }, "params": { - "operationKind": "mutation", - "name": "RemoveCompletedTodosMutation", + "cacheID": "4e579d172ceaf5d902f3da90438a1cfe", "id": null, - "text": "mutation RemoveCompletedTodosMutation(\n $input: RemoveCompletedTodosInput!\n) {\n removeCompletedTodos(input: $input) {\n deletedTodoIds\n viewer {\n completedCount\n totalCount\n id\n }\n }\n}\n", - "metadata": {} + "metadata": {}, + "name": "RemoveCompletedTodosMutation", + "operationKind": "mutation", + "text": "mutation RemoveCompletedTodosMutation(\n $input: RemoveCompletedTodosInput!\n) {\n removeCompletedTodos(input: $input) {\n deletedTodoIds\n viewer {\n completedCount\n totalCount\n id\n }\n }\n}\n" } }; })(); diff --git a/example-hooks/ts/__relay_artifacts__/RemoveTodoMutation.graphql.ts b/example-hooks/ts/__relay_artifacts__/RemoveTodoMutation.graphql.ts index 335db8da..fbe8330a 100644 --- a/example-hooks/ts/__relay_artifacts__/RemoveTodoMutation.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/RemoveTodoMutation.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ConcreteRequest } from "relay-runtime"; export type RemoveTodoInput = { @@ -42,10 +43,9 @@ mutation RemoveTodoMutation( const node: ConcreteRequest = (function(){ var v0 = [ { + "defaultValue": null, "kind": "LocalArgument", - "name": "input", - "type": "RemoveTodoInput!", - "defaultValue": null + "name": "input" } ], v1 = [ @@ -56,107 +56,109 @@ v1 = [ } ], v2 = { - "kind": "ScalarField", "alias": null, - "name": "deletedTodoId", "args": null, + "kind": "ScalarField", + "name": "deletedTodoId", "storageKey": null }, v3 = { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null }, v4 = { - "kind": "ScalarField", "alias": null, - "name": "totalCount", "args": null, + "kind": "ScalarField", + "name": "totalCount", "storageKey": null }; return { - "kind": "Request", "fragment": { + "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", - "name": "RemoveTodoMutation", - "type": "Mutation", "metadata": null, - "argumentDefinitions": (v0/*: any*/), + "name": "RemoveTodoMutation", "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "removeTodo", - "storageKey": null, "args": (v1/*: any*/), "concreteType": "RemoveTodoPayload", + "kind": "LinkedField", + "name": "removeTodo", "plural": false, "selections": [ (v2/*: any*/), { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ (v3/*: any*/), (v4/*: any*/) - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "type": "Mutation", + "abstractKey": null }, + "kind": "Request", "operation": { + "argumentDefinitions": (v0/*: any*/), "kind": "Operation", "name": "RemoveTodoMutation", - "argumentDefinitions": (v0/*: any*/), "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "removeTodo", - "storageKey": null, "args": (v1/*: any*/), "concreteType": "RemoveTodoPayload", + "kind": "LinkedField", + "name": "removeTodo", "plural": false, "selections": [ (v2/*: any*/), { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ (v3/*: any*/), (v4/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } ] }, "params": { - "operationKind": "mutation", - "name": "RemoveTodoMutation", + "cacheID": "0daba1c994a0eb6a7bff7c1474776547", "id": null, - "text": "mutation RemoveTodoMutation(\n $input: RemoveTodoInput!\n) {\n removeTodo(input: $input) {\n deletedTodoId\n viewer {\n completedCount\n totalCount\n id\n }\n }\n}\n", - "metadata": {} + "metadata": {}, + "name": "RemoveTodoMutation", + "operationKind": "mutation", + "text": "mutation RemoveTodoMutation(\n $input: RemoveTodoInput!\n) {\n removeTodo(input: $input) {\n deletedTodoId\n viewer {\n completedCount\n totalCount\n id\n }\n }\n}\n" } }; })(); diff --git a/example-hooks/ts/__relay_artifacts__/RenameTodoMutation.graphql.ts b/example-hooks/ts/__relay_artifacts__/RenameTodoMutation.graphql.ts index 825f7d2e..0c911e53 100644 --- a/example-hooks/ts/__relay_artifacts__/RenameTodoMutation.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/RenameTodoMutation.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ConcreteRequest } from "relay-runtime"; export type RenameTodoInput = { @@ -40,18 +41,14 @@ mutation RenameTodoMutation( const node: ConcreteRequest = (function(){ var v0 = [ { + "defaultValue": null, "kind": "LocalArgument", - "name": "input", - "type": "RenameTodoInput!", - "defaultValue": null + "name": "input" } ], v1 = [ { - "kind": "LinkedField", "alias": null, - "name": "renameTodo", - "storageKey": null, "args": [ { "kind": "Variable", @@ -60,58 +57,63 @@ v1 = [ } ], "concreteType": "RenameTodoPayload", + "kind": "LinkedField", + "name": "renameTodo", "plural": false, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "todo", - "storageKey": null, "args": null, "concreteType": "Todo", + "kind": "LinkedField", + "name": "todo", "plural": false, "selections": [ { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "text", "args": null, + "kind": "ScalarField", + "name": "text", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } ]; return { - "kind": "Request", "fragment": { + "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", + "metadata": null, "name": "RenameTodoMutation", + "selections": (v1/*: any*/), "type": "Mutation", - "metadata": null, - "argumentDefinitions": (v0/*: any*/), - "selections": (v1/*: any*/) + "abstractKey": null }, + "kind": "Request", "operation": { + "argumentDefinitions": (v0/*: any*/), "kind": "Operation", "name": "RenameTodoMutation", - "argumentDefinitions": (v0/*: any*/), "selections": (v1/*: any*/) }, "params": { - "operationKind": "mutation", - "name": "RenameTodoMutation", + "cacheID": "d970fd7dbf118794415dec7324d463e3", "id": null, - "text": "mutation RenameTodoMutation(\n $input: RenameTodoInput!\n) {\n renameTodo(input: $input) {\n todo {\n id\n text\n }\n }\n}\n", - "metadata": {} + "metadata": {}, + "name": "RenameTodoMutation", + "operationKind": "mutation", + "text": "mutation RenameTodoMutation(\n $input: RenameTodoInput!\n) {\n renameTodo(input: $input) {\n todo {\n id\n text\n }\n }\n}\n" } }; })(); diff --git a/example-hooks/ts/__relay_artifacts__/TodoApp_viewer.graphql.ts b/example-hooks/ts/__relay_artifacts__/TodoApp_viewer.graphql.ts index 3ec7b94b..e643f138 100644 --- a/example-hooks/ts/__relay_artifacts__/TodoApp_viewer.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/TodoApp_viewer.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ReaderFragment } from "relay-runtime"; import { FragmentRefs } from "relay-runtime"; @@ -17,37 +18,38 @@ export type TodoApp_viewer$key = { const node: ReaderFragment = { + "argumentDefinitions": [], "kind": "Fragment", - "name": "TodoApp_viewer", - "type": "User", "metadata": null, - "argumentDefinitions": [], + "name": "TodoApp_viewer", "selections": [ { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "totalCount", "args": null, + "kind": "ScalarField", + "name": "totalCount", "storageKey": null }, { + "args": null, "kind": "FragmentSpread", - "name": "TodoListFooter_viewer", - "args": null + "name": "TodoListFooter_viewer" }, { + "args": null, "kind": "FragmentSpread", - "name": "TodoList_viewer", - "args": null + "name": "TodoList_viewer" } - ] + ], + "type": "User", + "abstractKey": null }; (node as any).hash = 'b9743417c7b5ef2bbda96cf675aa9eb4'; export default node; diff --git a/example-hooks/ts/__relay_artifacts__/TodoListFooter_viewer.graphql.ts b/example-hooks/ts/__relay_artifacts__/TodoListFooter_viewer.graphql.ts index c664ec49..37b20157 100644 --- a/example-hooks/ts/__relay_artifacts__/TodoListFooter_viewer.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/TodoListFooter_viewer.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ReaderFragment } from "relay-runtime"; import { FragmentRefs } from "relay-runtime"; @@ -26,32 +27,28 @@ export type TodoListFooter_viewer$key = { const node: ReaderFragment = (function(){ var v0 = { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }; return { + "argumentDefinitions": [], "kind": "Fragment", - "name": "TodoListFooter_viewer", - "type": "User", "metadata": null, - "argumentDefinitions": [], + "name": "TodoListFooter_viewer", "selections": [ (v0/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null }, { - "kind": "LinkedField", "alias": "completedTodos", - "name": "todos", - "storageKey": "todos(first:2147483647,status:\"completed\")", "args": [ { "kind": "Literal", @@ -65,48 +62,53 @@ return { } ], "concreteType": "TodoConnection", + "kind": "LinkedField", + "name": "todos", "plural": false, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "edges", - "storageKey": null, "args": null, "concreteType": "TodoEdge", + "kind": "LinkedField", + "name": "edges", "plural": true, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "node", - "storageKey": null, "args": null, "concreteType": "Todo", + "kind": "LinkedField", + "name": "node", "plural": false, "selections": [ (v0/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "complete", "args": null, + "kind": "ScalarField", + "name": "complete", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": "todos(first:2147483647,status:\"completed\")" }, { - "kind": "ScalarField", "alias": null, - "name": "totalCount", "args": null, + "kind": "ScalarField", + "name": "totalCount", "storageKey": null } - ] + ], + "type": "User", + "abstractKey": null }; })(); (node as any).hash = '2490c58e1768d71f3824c1facd127033'; diff --git a/example-hooks/ts/__relay_artifacts__/TodoList_viewer.graphql.ts b/example-hooks/ts/__relay_artifacts__/TodoList_viewer.graphql.ts index 68f8bb61..04d80b95 100644 --- a/example-hooks/ts/__relay_artifacts__/TodoList_viewer.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/TodoList_viewer.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ReaderFragment } from "relay-runtime"; import { FragmentRefs } from "relay-runtime"; @@ -28,16 +29,15 @@ export type TodoList_viewer$key = { const node: ReaderFragment = (function(){ var v0 = { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }; return { + "argumentDefinitions": [], "kind": "Fragment", - "name": "TodoList_viewer", - "type": "User", "metadata": { "connection": [ { @@ -50,114 +50,116 @@ return { } ] }, - "argumentDefinitions": [], + "name": "TodoList_viewer", "selections": [ { - "kind": "LinkedField", "alias": "todos", - "name": "__TodoList_todos_connection", - "storageKey": null, "args": null, "concreteType": "TodoConnection", + "kind": "LinkedField", + "name": "__TodoList_todos_connection", "plural": false, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "edges", - "storageKey": null, "args": null, "concreteType": "TodoEdge", + "kind": "LinkedField", + "name": "edges", "plural": true, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "node", - "storageKey": null, "args": null, "concreteType": "Todo", + "kind": "LinkedField", + "name": "node", "plural": false, "selections": [ (v0/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "complete", "args": null, + "kind": "ScalarField", + "name": "complete", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "__typename", "args": null, + "kind": "ScalarField", + "name": "__typename", "storageKey": null }, { + "args": null, "kind": "FragmentSpread", - "name": "Todo_todo", - "args": null + "name": "Todo_todo" } - ] + ], + "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "cursor", "args": null, + "kind": "ScalarField", + "name": "cursor", "storageKey": null } - ] + ], + "storageKey": null }, { - "kind": "LinkedField", "alias": null, - "name": "pageInfo", - "storageKey": null, "args": null, "concreteType": "PageInfo", + "kind": "LinkedField", + "name": "pageInfo", "plural": false, "selections": [ { - "kind": "ScalarField", "alias": null, - "name": "endCursor", "args": null, + "kind": "ScalarField", + "name": "endCursor", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "hasNextPage", "args": null, + "kind": "ScalarField", + "name": "hasNextPage", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": null }, (v0/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "totalCount", "args": null, + "kind": "ScalarField", + "name": "totalCount", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null }, { + "args": null, "kind": "FragmentSpread", - "name": "Todo_viewer", - "args": null + "name": "Todo_viewer" } - ] + ], + "type": "User", + "abstractKey": null }; })(); (node as any).hash = 'a3e4165e516c834231092d435f5dd81c'; diff --git a/example-hooks/ts/__relay_artifacts__/TodoRootQuery.graphql.ts b/example-hooks/ts/__relay_artifacts__/TodoRootQuery.graphql.ts index 917a5727..23b89139 100644 --- a/example-hooks/ts/__relay_artifacts__/TodoRootQuery.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/TodoRootQuery.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ConcreteRequest } from "relay-runtime"; import { FragmentRefs } from "relay-runtime"; @@ -81,10 +82,10 @@ fragment Todo_viewer on User { const node: ConcreteRequest = (function(){ var v0 = { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }, v1 = { @@ -93,76 +94,73 @@ v1 = { "value": 2147483647 }, v2 = { - "kind": "ScalarField", "alias": null, - "name": "complete", "args": null, + "kind": "ScalarField", + "name": "complete", "storageKey": null }, v3 = [ (v1/*: any*/) ]; return { - "kind": "Request", "fragment": { + "argumentDefinitions": [], "kind": "Fragment", - "name": "TodoRootQuery", - "type": "Query", "metadata": null, - "argumentDefinitions": [], + "name": "TodoRootQuery", "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ { + "args": null, "kind": "FragmentSpread", - "name": "TodoApp_viewer", - "args": null + "name": "TodoApp_viewer" } - ] + ], + "storageKey": null } - ] + ], + "type": "Query", + "abstractKey": null }, + "kind": "Request", "operation": { + "argumentDefinitions": [], "kind": "Operation", "name": "TodoRootQuery", - "argumentDefinitions": [], "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "viewer", - "storageKey": null, "args": null, "concreteType": "User", + "kind": "LinkedField", + "name": "viewer", "plural": false, "selections": [ (v0/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "totalCount", "args": null, + "kind": "ScalarField", + "name": "totalCount", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null }, { - "kind": "LinkedField", "alias": "completedTodos", - "name": "todos", - "storageKey": "todos(first:2147483647,status:\"completed\")", "args": [ (v1/*: any*/), { @@ -172,134 +170,139 @@ return { } ], "concreteType": "TodoConnection", + "kind": "LinkedField", + "name": "todos", "plural": false, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "edges", - "storageKey": null, "args": null, "concreteType": "TodoEdge", + "kind": "LinkedField", + "name": "edges", "plural": true, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "node", - "storageKey": null, "args": null, "concreteType": "Todo", + "kind": "LinkedField", + "name": "node", "plural": false, "selections": [ (v0/*: any*/), (v2/*: any*/) - ] + ], + "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": "todos(first:2147483647,status:\"completed\")" }, { - "kind": "LinkedField", "alias": null, - "name": "todos", - "storageKey": "todos(first:2147483647)", "args": (v3/*: any*/), "concreteType": "TodoConnection", + "kind": "LinkedField", + "name": "todos", "plural": false, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "edges", - "storageKey": null, "args": null, "concreteType": "TodoEdge", + "kind": "LinkedField", + "name": "edges", "plural": true, "selections": [ { - "kind": "LinkedField", "alias": null, - "name": "node", - "storageKey": null, "args": null, "concreteType": "Todo", + "kind": "LinkedField", + "name": "node", "plural": false, "selections": [ (v0/*: any*/), (v2/*: any*/), { - "kind": "ScalarField", "alias": null, - "name": "text", "args": null, + "kind": "ScalarField", + "name": "text", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "__typename", "args": null, + "kind": "ScalarField", + "name": "__typename", "storageKey": null } - ] + ], + "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "cursor", "args": null, + "kind": "ScalarField", + "name": "cursor", "storageKey": null } - ] + ], + "storageKey": null }, { - "kind": "LinkedField", "alias": null, - "name": "pageInfo", - "storageKey": null, "args": null, "concreteType": "PageInfo", + "kind": "LinkedField", + "name": "pageInfo", "plural": false, "selections": [ { - "kind": "ScalarField", "alias": null, - "name": "endCursor", "args": null, + "kind": "ScalarField", + "name": "endCursor", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "hasNextPage", "args": null, + "kind": "ScalarField", + "name": "hasNextPage", "storageKey": null } - ] + ], + "storageKey": null } - ] + ], + "storageKey": "todos(first:2147483647)" }, { - "kind": "LinkedHandle", "alias": null, - "name": "todos", "args": (v3/*: any*/), + "filters": null, "handle": "connection", "key": "TodoList_todos", - "filters": null + "kind": "LinkedHandle", + "name": "todos" } - ] + ], + "storageKey": null } ] }, "params": { - "operationKind": "query", - "name": "TodoRootQuery", + "cacheID": "aa930c568e1956ad8f1445115d6f5aff", "id": null, - "text": "query TodoRootQuery {\n viewer {\n ...TodoApp_viewer\n id\n }\n}\n\nfragment TodoApp_viewer on User {\n id\n totalCount\n ...TodoListFooter_viewer\n ...TodoList_viewer\n}\n\nfragment TodoListFooter_viewer on User {\n id\n completedCount\n completedTodos: todos(status: \"completed\", first: 2147483647) {\n edges {\n node {\n id\n complete\n }\n }\n }\n totalCount\n}\n\nfragment TodoList_viewer on User {\n todos(first: 2147483647) {\n edges {\n node {\n id\n complete\n ...Todo_todo\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n id\n totalCount\n completedCount\n ...Todo_viewer\n}\n\nfragment Todo_todo on Todo {\n complete\n id\n text\n}\n\nfragment Todo_viewer on User {\n id\n totalCount\n completedCount\n}\n", - "metadata": {} + "metadata": {}, + "name": "TodoRootQuery", + "operationKind": "query", + "text": "query TodoRootQuery {\n viewer {\n ...TodoApp_viewer\n id\n }\n}\n\nfragment TodoApp_viewer on User {\n id\n totalCount\n ...TodoListFooter_viewer\n ...TodoList_viewer\n}\n\nfragment TodoListFooter_viewer on User {\n id\n completedCount\n completedTodos: todos(status: \"completed\", first: 2147483647) {\n edges {\n node {\n id\n complete\n }\n }\n }\n totalCount\n}\n\nfragment TodoList_viewer on User {\n todos(first: 2147483647) {\n edges {\n node {\n id\n complete\n ...Todo_todo\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n id\n totalCount\n completedCount\n ...Todo_viewer\n}\n\nfragment Todo_todo on Todo {\n complete\n id\n text\n}\n\nfragment Todo_viewer on User {\n id\n totalCount\n completedCount\n}\n" } }; })(); diff --git a/example-hooks/ts/__relay_artifacts__/Todo_todo.graphql.ts b/example-hooks/ts/__relay_artifacts__/Todo_todo.graphql.ts index f25aae69..c4664596 100644 --- a/example-hooks/ts/__relay_artifacts__/Todo_todo.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/Todo_todo.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ReaderFragment } from "relay-runtime"; import { FragmentRefs } from "relay-runtime"; @@ -17,34 +18,35 @@ export type Todo_todo$key = { const node: ReaderFragment = { + "argumentDefinitions": [], "kind": "Fragment", - "name": "Todo_todo", - "type": "Todo", "metadata": null, - "argumentDefinitions": [], + "name": "Todo_todo", "selections": [ { - "kind": "ScalarField", "alias": null, - "name": "complete", "args": null, + "kind": "ScalarField", + "name": "complete", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "text", "args": null, + "kind": "ScalarField", + "name": "text", "storageKey": null } - ] + ], + "type": "Todo", + "abstractKey": null }; (node as any).hash = '1f979eb84ff026fe8a89323dd533d1fc'; export default node; diff --git a/example-hooks/ts/__relay_artifacts__/Todo_viewer.graphql.ts b/example-hooks/ts/__relay_artifacts__/Todo_viewer.graphql.ts index f959a14a..ec66cc8a 100644 --- a/example-hooks/ts/__relay_artifacts__/Todo_viewer.graphql.ts +++ b/example-hooks/ts/__relay_artifacts__/Todo_viewer.graphql.ts @@ -1,4 +1,5 @@ /* tslint:disable */ +/* eslint-disable */ import { ReaderFragment } from "relay-runtime"; import { FragmentRefs } from "relay-runtime"; @@ -17,34 +18,35 @@ export type Todo_viewer$key = { const node: ReaderFragment = { + "argumentDefinitions": [], "kind": "Fragment", - "name": "Todo_viewer", - "type": "User", "metadata": null, - "argumentDefinitions": [], + "name": "Todo_viewer", "selections": [ { - "kind": "ScalarField", "alias": null, - "name": "id", "args": null, + "kind": "ScalarField", + "name": "id", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "totalCount", "args": null, + "kind": "ScalarField", + "name": "totalCount", "storageKey": null }, { - "kind": "ScalarField", "alias": null, - "name": "completedCount", "args": null, + "kind": "ScalarField", + "name": "completedCount", "storageKey": null } - ] + ], + "type": "User", + "abstractKey": null }; (node as any).hash = '1e2b17bb7b92d4521c4e72309d996339'; export default node; diff --git a/example-hooks/ts/components/TodoApp.tsx b/example-hooks/ts/components/TodoApp.tsx index 548cf477..a7b25f93 100644 --- a/example-hooks/ts/components/TodoApp.tsx +++ b/example-hooks/ts/components/TodoApp.tsx @@ -26,6 +26,7 @@ interface Props { const TodoApp = (props: Props) => { const environment = useRelayEnvironment() + const [append, setAppend] = React.useState(false); const viewer = useFragment( graphql` @@ -40,11 +41,13 @@ const TodoApp = (props: Props) => { ) const handleTextInputSave = (text: string) => { - AddTodoMutation.commit(environment, text, viewer) + AddTodoMutation.commit(environment, text, viewer, append) } const hasTodos = (viewer.totalCount || 0) > 0 + const onSetAppend = () => setAppend(prev => !prev); + return (
@@ -58,7 +61,7 @@ const TodoApp = (props: Props) => { /> - {hasTodos && } + {hasTodos && }