Setup simple GQL query

freeCodeCamp · Zeko369 · Aug 2, 2020 · Aug 2, 2020 · Aug 2, 2020 · Aug 2, 2020
commit ce9c7538bb8df613940e21c1bf537c2e2840a9ef
diff --git a/client/codegen.js b/client/codegen.js
@@ -1,9 +1,9 @@
 module.exports = {
   schema: [{ 'http://localhost:4000/graphql': {} }],
-  documents: ['./src/**/*.tsx'],
+  documents: ['./src/**/graphql/*.ts'],
   overwrite: true,
   generates: {
-    './generated/index.tsx': {
+    './src/generated/index.tsx': {
       plugins: [
         'typescript',
         'typescript-operations',

diff --git a/client/src/components/index.ts b/client/src/components/index.ts
@@ -1,5 +1,4 @@
-import SomeComponent from './SomeComponent';
 import AddSponsor from './AddSponsor';
 import ProgressCardContent from './ProgressCardContent';
 
-export { SomeComponent, AddSponsor, ProgressCardContent };
+export { AddSponsor, ProgressCardContent };
diff --git a/client/src/generated/index.tsx b/client/src/generated/index.tsx
@@ -279,14 +279,17 @@ export type UpdateVenueInputs = {
 export type ChaptersQueryVariables = Exact<{ [key: string]: never }>;
 
 export type ChaptersQuery = { __typename?: 'Query' } & {
-  chapters: Array<{ __typename?: 'Chapter' } & Pick<Chapter, 'id' | 'name'>>;
+  chapters: Array<
+    { __typename?: 'Chapter' } & Pick<Chapter, 'id' | 'name' | 'description'>
+  >;
 };
 
 export const ChaptersDocument = gql`
   query chapters {
     chapters {
       id
       name
+      description
     }
   }
 `;

diff --git a/client/src/modules/home.tsx b/client/src/modules/home.tsx
diff --git a/client/src/services/test.tsx → client/src/modules/home/graphql/queries.ts b/client/src/services/test.tsx → client/src/modules/home/graphql/queries.ts
@@ -1,10 +1,11 @@
 import { gql } from '@apollo/client';
 
-export const MainQuery = gql`
+export const CHAPTERS_QUERY = gql`
   query chapters {
     chapters {
       id
       name
+      description
     }
   }
 `;
diff --git a/client/src/modules/home/index.tsx b/client/src/modules/home/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Link from 'next/link';
+import { Card, Typography, Grid } from '@material-ui/core';
+
+import { ProgressCardContent } from '../../components';
+import { useChaptersQuery } from '../../generated';
+
+const Home: React.FC = () => {
+  const { loading, error, data } = useChaptersQuery();
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={10}>
+          {!error && (
+            <Card>
+              <ProgressCardContent loading={loading}>
+                {data?.chapters.map(chapter => (
+                  <>
+                    <Typography gutterBottom variant="h5" component="h2">
+                      {chapter.name}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      color="textSecondary"
+                      component="p"
+                    >
+                      {chapter.description}
+                    </Typography>
+                  </>
+                ))}
+              </ProgressCardContent>
+            </Card>
+          )}
+        </Grid>
+      </Grid>
+      <Link href="/add-sponsor">
+        <a>Add sponsor</a>
+      </Link>
+      <br />
+      <Link href="/dashboard">
+        <a>Admin dashboard</a>
+      </Link>
+    </>
+  );
+};
+
+export default Home;
diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx
@@ -6,6 +6,7 @@ import { applyMiddleware, compose, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import { ThemeProvider as MaterialUIThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
 import theme from '../styles/theme';
 import { rootReducer } from '../store/reducers';
@@ -21,6 +22,11 @@ const store = createStore(
   composeEnhancers(applyMiddleware(thunk)),
 );
 
+const client = new ApolloClient({
+  uri: 'http://localhost:4000/graphql',
+  cache: new InMemoryCache(),
+});
+
 export default class MyApp extends App {
   render() {
     const { Component, pageProps } = this.props;
@@ -35,14 +41,16 @@ export default class MyApp extends App {
           />
           <meta name="theme-color" content={theme.palette.primary.main} />
         </Head>
-        <Provider store={store}>
-          <MaterialUIThemeProvider theme={theme}>
-            <CssBaseline />
-            <PageLayout>
-              <Component {...pageProps} />
-            </PageLayout>
-          </MaterialUIThemeProvider>
-        </Provider>
+        <ApolloProvider client={client}>
+          <Provider store={store}>
+            <MaterialUIThemeProvider theme={theme}>
+              <CssBaseline />
+              <PageLayout>
+                <Component {...pageProps} />
+              </PageLayout>
+            </MaterialUIThemeProvider>
+          </Provider>
+        </ApolloProvider>
       </>
     );
   }