Add Suspense

flexbox · Apr 24, 2019 · 63ddbbc · 63ddbbc
1 parent 3bd73ce
commit 63ddbbc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/6-suspense/app/src/App.js b/6-suspense/app/src/App.js
@@ -1,13 +1,17 @@
-import React from "react";
-import Profile from "./Profile";
-import Repositories from "./Repositories";
+import React, { Suspense } from 'react';
+import Profile from './Profile';
+import Repositories from './Repositories';
 
 function App() {
   return (
-    <div>
-      <Profile />
-      <Repositories />
-    </div>
+    <>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Profile />
+      </Suspense>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Repositories />
+      </Suspense>
+    </>
   );
 }
 

diff --git a/6-suspense/app/src/Profile.js b/6-suspense/app/src/Profile.js
@@ -1,6 +1,6 @@
-import React from "react";
-import gql from "graphql-tag";
-import { useQuery } from "react-apollo-hooks";
+import React from 'react';
+import gql from 'graphql-tag';
+import { useQuery } from 'react-apollo-hooks';
 
 const profileQuery = gql`
   {
@@ -13,10 +13,7 @@ const profileQuery = gql`
 `;
 
 function Profile() {
-  const { loading, data, error } = useQuery(profileQuery);
-  if (loading) {
-    return <div>Loading ...</div>;
-  }
+  const { data, error } = useQuery(profileQuery, { suspend: true });
   if (error) {
     return <div>Error: {error.message}</div>;
   }

diff --git a/6-suspense/app/src/Repositories.js b/6-suspense/app/src/Repositories.js
@@ -1,6 +1,6 @@
-import React from "react";
-import gql from "graphql-tag";
-import { useQuery } from "react-apollo-hooks";
+import React from 'react';
+import gql from 'graphql-tag';
+import { useQuery } from 'react-apollo-hooks';
 
 const repositoriesQuery = gql`
   {
@@ -16,10 +16,7 @@ const repositoriesQuery = gql`
 `;
 
 function Repositories() {
-  const { loading, data, error } = useQuery(repositoriesQuery);
-  if (loading) {
-    return <div>Loading ...</div>;
-  }
+  const { data, error } = useQuery(repositoriesQuery, { suspend: true });
   if (error) {
     return <div>Error: {error.message}</div>;
   }