From 74e274c188e2e42b89b64d6a03875e408258b858 Mon Sep 17 00:00:00 2001 From: "lorenzo.digiacomo" Date: Thu, 13 Jun 2019 19:38:09 +0200 Subject: [PATCH 1/7] sync react-relay, useQuery, provider, useFragment, useMutation, example --- examples/relay-example/todo/server.js | 2 +- examples/relay-example/todo/yarn.lock | 8 +- examples/relay-hook-example/todo/js/app.js | 11 +- .../todo/js/components/Todo.js | 14 +- .../todo/js/components/TodoApp.js | 18 +- .../todo/js/components/TodoList.js | 14 +- .../todo/js/components/TodoListFooter.js | 9 +- .../todo/js/mutations/AddTodoMutation.js | 12 +- .../js/mutations/ChangeTodoStatusMutation.js | 7 +- .../todo/js/mutations/MarkAllTodosMutation.js | 5 +- .../mutations/RemoveCompletedTodosMutation.js | 5 +- .../todo/js/mutations/RemoveTodoMutation.js | 5 +- .../todo/js/mutations/RenameTodoMutation.js | 6 +- examples/relay-hook-example/todo/package.json | 2 +- examples/relay-hook-example/todo/yarn.lock | 14 +- package-lock.json | 81 ++++--- package.json | 8 +- src/FragmentPagination.ts | 13 +- src/FragmentRefetch.ts | 6 +- src/MUTATION.md | 96 ++++++++ src/QueryRenderer.tsx | 34 --- src/RelayEnvironmentProvider.tsx | 16 ++ src/RelayHooksType.ts | 11 +- src/index.ts | 5 +- src/useFragment.tsx | 70 +++--- src/useMutation.ts | 160 +++++++++++++ src/useQuery.ts | 56 +++-- yarn.lock | 216 ------------------ 28 files changed, 452 insertions(+), 452 deletions(-) create mode 100644 src/MUTATION.md delete mode 100644 src/QueryRenderer.tsx create mode 100644 src/RelayEnvironmentProvider.tsx create mode 100644 src/useMutation.ts delete mode 100644 yarn.lock diff --git a/examples/relay-example/todo/server.js b/examples/relay-example/todo/server.js index 1b5c6762..eaf797bf 100644 --- a/examples/relay-example/todo/server.js +++ b/examples/relay-example/todo/server.js @@ -18,7 +18,7 @@ import webpack from 'webpack'; import WebpackDevServer from 'webpack-dev-server'; import {schema} from './data/schema'; -const APP_PORT: number = 3000; +const APP_PORT: number = 4000; // Serve the Relay app // Calling webpack() without a callback as 2nd property returns a Compiler object. diff --git a/examples/relay-example/todo/yarn.lock b/examples/relay-example/todo/yarn.lock index 3ed074ae..c963f6ad 100644 --- a/examples/relay-example/todo/yarn.lock +++ b/examples/relay-example/todo/yarn.lock @@ -5317,10 +5317,10 @@ relay-compiler@^4.0.0: signedsource "^1.0.0" yargs "^9.0.0" -relay-hooks@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-0.1.0.tgz#0f361a189189cdac50b4caaf4b890b8afac49d60" - integrity sha512-F6Um4lKpNsDDm+61ccvxCSpdNNVA/nrISVgSK3PRMymLdB3HVKwBAAV/1GzuElXqEl4TBfiRAg58KBqakekR5w== +relay-hooks@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-0.2.0.tgz#5339c272e1df703e31a9515199ab0c70e0e30210" + integrity sha512-K5SDNYL3CZe2Mds4nkPi8LpmWwN3cYrsuCxdQ1pScCUPYONM+i1OqJi1hFZSUg9xSZgLsNxd9m0ByAQdmXWyHw== relay-runtime@4.0.0: version "4.0.0" diff --git a/examples/relay-hook-example/todo/js/app.js b/examples/relay-hook-example/todo/js/app.js index a48814fe..e436bb65 100644 --- a/examples/relay-hook-example/todo/js/app.js +++ b/examples/relay-hook-example/todo/js/app.js @@ -16,7 +16,7 @@ import 'todomvc-common'; import * as React from 'react'; import ReactDOM from 'react-dom'; -import {QueryRenderer, graphql, useQuery} from 'relay-hooks'; +import {useQuery, RelayEnvironmentProvider} from 'relay-hooks'; import { Environment, Network, @@ -56,8 +56,7 @@ const modernEnvironment: Environment = new Environment({ const rootElement = document.getElementById('root'); const AppTodo = function (appProps) { - const hooksProps = useQuery({environment: modernEnvironment, - query: QueryApp, + const hooksProps = useQuery({ query: QueryApp, variables: { // Mock authenticated ID that matches database userId: 'me', @@ -65,7 +64,7 @@ const AppTodo = function (appProps) { const {props, error, retry, cached} = hooksProps; if (props && props.user) { - return ; + return ; } else if (error) { return
{error.message}
; } @@ -75,7 +74,9 @@ const AppTodo = function (appProps) { if (rootElement) { ReactDOM.render( - , + + + , rootElement, ); } diff --git a/examples/relay-hook-example/todo/js/components/Todo.js b/examples/relay-hook-example/todo/js/components/Todo.js index bd3310c2..b63bdc39 100644 --- a/examples/relay-hook-example/todo/js/components/Todo.js +++ b/examples/relay-hook-example/todo/js/components/Todo.js @@ -29,27 +29,25 @@ type Props = {| +user: Todo_user, |}; -const fragmentSpec = { - todo: graphql` +const fragmentSpecTodo = graphql` fragment Todo_todo on Todo { complete id text } - `, - user: graphql` + `; + const fragmentSpecUser = graphql` fragment Todo_user on User { id userId totalCount completedCount } - `, -}; + `; const Todo = (props) => { - const { relay } = props; - const { todo, user } = useFragment(props, fragmentSpec); + const { user } = useFragment(fragmentSpecUser, props.user); + const { todo } = useFragment(fragmentSpecTodo, props.todo); const [isEditing, setIsEditing] = useState(false); const handleCompleteChange = (e: SyntheticEvent) => { diff --git a/examples/relay-hook-example/todo/js/components/TodoApp.js b/examples/relay-hook-example/todo/js/components/TodoApp.js index 0bad8328..e27bccb3 100644 --- a/examples/relay-hook-example/todo/js/components/TodoApp.js +++ b/examples/relay-hook-example/todo/js/components/TodoApp.js @@ -11,7 +11,7 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import AddTodoMutation from '../mutations/AddTodoMutation'; +import AddTodoMutation, {mutation} from '../mutations/AddTodoMutation'; import TodoList from './TodoList'; import TodoListFooter from './TodoListFooter'; import TodoTextInput from './TodoTextInput'; @@ -27,8 +27,7 @@ type Props = {| +user: TodoApp_user, |}; -const fragmentSpec = { - user: graphql` +const fragmentSpec = graphql` fragment TodoApp_user on User { id userId @@ -36,14 +35,13 @@ const fragmentSpec = { ...TodoListFooter_user ...TodoList_user } - `, -}; + `; const TodoApp = (props) => { - const fragProps = useFragment(props, fragmentSpec); - const {user} = fragProps; + const { user } = useFragment(fragmentSpec, props.user); + const [mutate, { loading }] = useMutation(mutation); const handleTextInputSave = (text: string) => { - AddTodoMutation.commit(props.relay.environment, text, user); + AddTodoMutation.commit(mutate, text, user); return; }; @@ -62,8 +60,8 @@ const TodoApp = (props) => { /> - - {hasTodos && } + + {hasTodos && }