From 8f38d66e5ccc3e460622ff52cd4787c890c41ff9 Mon Sep 17 00:00:00 2001 From: Brianna Cerkiewicz Date: Tue, 1 Mar 2022 08:58:01 -0800 Subject: [PATCH] fetch a query with relay --- client/src/App.tsx | 109 ++++++------ .../__generated__/AppAllTodosQuery.graphql.ts | 160 ++++++++++++++++++ client/src/__generated__/AppQuery.graphql.ts | 119 +++++++++++++ 3 files changed, 338 insertions(+), 50 deletions(-) create mode 100644 client/src/__generated__/AppAllTodosQuery.graphql.ts create mode 100644 client/src/__generated__/AppQuery.graphql.ts diff --git a/client/src/App.tsx b/client/src/App.tsx index c5f0fa0..68bbf6e 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,60 +1,69 @@ import React from 'react'; -import logo from './logo.svg'; import './App.css'; -import fetchGraphQL from './fetchGraphQL'; +import graphql from 'babel-plugin-relay/macro'; +import { + RelayEnvironmentProvider, + loadQuery, + usePreloadedQuery, +} from 'react-relay/hooks'; +import RelayEnvironment from './RelayEnvironment'; -const { useState, useEffect } = React; +const { Suspense } = React; -function App() { -// We'll load the name of a repository, initially setting it to null -const [query, setQuery] = useState(null); - -// When the component mounts we'll fetch a repository name -useEffect(() => { - let isMounted = true; - fetchGraphQL(` - query MyQuery { - query { - allTodos { - edges { - node { - id - dateUpdated - dateCreated - completed - task - } - } - } +// Define a query +const AppAllTodosQuery = graphql` +query AppQuery { + allTodos { + nodes { + id, + task, + completed, + dateCreated, + dateUpdated } } - `).then(response => { - // Avoid updating state if the component unmounted before the fetch completes - if (!isMounted) { - return; - } - const data = response.data; - setQuery(data); - console.log('data is',data) - }).catch(error => { - console.error(error); - }); +} +`; - return () => { - isMounted = false; - }; -}, []); +// Immediately load the query as our app starts. For a real app, we'd move this +// into our routing configuration, preloading data as we transition to new routes. +const preloadedQuery = loadQuery(RelayEnvironment, AppAllTodosQuery, { + /* query variables */ +}); + +// Inner component that reads the preloaded query results via `usePreloadedQuery()`. +// This works as follows: +// - If the query has completed, it returns the results of the query. +// - If the query is still pending, it "suspends" (indicates to React that the +// component isn't ready to render yet). This will show the nearest +// fallback. +// - If the query failed, it throws the failure error. For simplicity we aren't +// handling the failure case here. +function App(props) { + const data = usePreloadedQuery(AppAllTodosQuery, props.preloadedQuery); + + return ( +
+
+

{JSON.stringify(data)}

+
+
+ ); +} -// Render "Loading" until the query completes -return ( -
-
-

- {query != null ? `Query: ${JSON.stringify(query)}` : "Loading"} -

-
-
-); +// The above component needs to know how to access the Relay environment, and we +// need to specify a fallback in case it suspends: +// - tells child components how to talk to the current +// Relay Environment instance +// - specifies a fallback in case a child suspends. +function AppRoot(props) { + return ( + + + + + + ); } -export default App; +export default AppRoot; \ No newline at end of file diff --git a/client/src/__generated__/AppAllTodosQuery.graphql.ts b/client/src/__generated__/AppAllTodosQuery.graphql.ts new file mode 100644 index 0000000..e045a6d --- /dev/null +++ b/client/src/__generated__/AppAllTodosQuery.graphql.ts @@ -0,0 +1,160 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest, Query } from 'relay-runtime'; +export type AppAllTodosQuery$variables = {}; +export type AppAllTodosQuery$data = { + readonly query: { + readonly allTodos: { + readonly edges: ReadonlyArray<{ + readonly node: { + readonly id: string; + readonly dateUpdated: any; + readonly dateCreated: any; + readonly completed: boolean; + readonly task: string; + } | null; + }>; + } | null; + }; +}; +export type AppAllTodosQuery = { + variables: AppAllTodosQuery$variables; + response: AppAllTodosQuery$data; +}; + +const node: ConcreteRequest = (function(){ +var v0 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}, +v1 = { + "alias": null, + "args": null, + "concreteType": "TodosConnection", + "kind": "LinkedField", + "name": "allTodos", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "TodosEdge", + "kind": "LinkedField", + "name": "edges", + "plural": true, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "Todo", + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + (v0/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "dateUpdated", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "dateCreated", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "completed", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "task", + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null +}; +return { + "fragment": { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "AppAllTodosQuery", + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "Query", + "kind": "LinkedField", + "name": "query", + "plural": false, + "selections": [ + (v1/*: any*/) + ], + "storageKey": null + } + ], + "type": "Query", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": [], + "kind": "Operation", + "name": "AppAllTodosQuery", + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "Query", + "kind": "LinkedField", + "name": "query", + "plural": false, + "selections": [ + (v1/*: any*/), + (v0/*: any*/) + ], + "storageKey": null + } + ] + }, + "params": { + "cacheID": "4d4076da75058681b1bd37f2d91175cd", + "id": null, + "metadata": {}, + "name": "AppAllTodosQuery", + "operationKind": "query", + "text": "query AppAllTodosQuery {\n query {\n allTodos {\n edges {\n node {\n id\n dateUpdated\n dateCreated\n completed\n task\n }\n }\n }\n id\n }\n}\n" + } +}; +})(); + +(node as any).hash = "1b506467db531422c244727f871163a2"; + +export default node; diff --git a/client/src/__generated__/AppQuery.graphql.ts b/client/src/__generated__/AppQuery.graphql.ts new file mode 100644 index 0000000..839fb04 --- /dev/null +++ b/client/src/__generated__/AppQuery.graphql.ts @@ -0,0 +1,119 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest, Query } from 'relay-runtime'; +export type AppQuery$variables = {}; +export type AppQuery$data = { + readonly allTodos: { + readonly nodes: ReadonlyArray<{ + readonly id: string; + readonly task: string; + readonly completed: boolean; + readonly dateCreated: any; + readonly dateUpdated: any; + } | null>; + } | null; +}; +export type AppQuery = { + variables: AppQuery$variables; + response: AppQuery$data; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "alias": null, + "args": null, + "concreteType": "TodosConnection", + "kind": "LinkedField", + "name": "allTodos", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "Todo", + "kind": "LinkedField", + "name": "nodes", + "plural": true, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "task", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "completed", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "dateCreated", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "dateUpdated", + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + } +]; +return { + "fragment": { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "AppQuery", + "selections": (v0/*: any*/), + "type": "Query", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": [], + "kind": "Operation", + "name": "AppQuery", + "selections": (v0/*: any*/) + }, + "params": { + "cacheID": "27c36c026a73563358b9f889a91cfee5", + "id": null, + "metadata": {}, + "name": "AppQuery", + "operationKind": "query", + "text": "query AppQuery {\n allTodos {\n nodes {\n id\n task\n completed\n dateCreated\n dateUpdated\n }\n }\n}\n" + } +}; +})(); + +(node as any).hash = "678863fde77bac959fcae438358fe069"; + +export default node;