feat: 🎸 add Apollo Client

✅ Closes: #3

.eslintignore

@@ -4,3 +4,4 @@ yarn.lock
 public
 build
 README.md
+generated

codegen.yml

@@ -0,0 +1,9 @@
+overwrite: true
+schema: 'http://localhost:4000/graphql'
+documents: 'graphql/**/*.graphql'
+generates:
+  generated/graphql.ts:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'

generated/graphql.ts

@@ -0,0 +1,122 @@
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+const defaultOptions =  {}
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+/** 募集 */
+export type Project = {
+  __typename?: 'Project';
+  /** 募集のID */
+  id: Scalars['ID'];
+  /** 画像URL（一覧表示用） */
+  imageUrlSmall?: Maybe<Scalars['String']>;
+  /** 画像URL（詳細画面用） */
+  imageUrlLarge?: Maybe<Scalars['String']>;
+  /** タイトル */
+  title: Scalars['String'];
+  /** なにをやっているのか */
+  whatDescription: Scalars['String'];
+  /** なぜやっているのか */
+  whyDescription: Scalars['String'];
+  /** どうやるのか */
+  howDescription: Scalars['String'];
+  /** 募集に紐づくメンバー */
+  staffs?: Maybe<Array<Maybe<User>>>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  /** 募集一覧を返すクエリ */
+  projects?: Maybe<Array<Maybe<Project>>>;
+  /** 募集IDから募集を返すクエリ */
+  project?: Maybe<Project>;
+};
+
+
+export type QueryProjectArgs = {
+  id: Scalars['ID'];
+};
+
+/** ユーザー */
+export type User = {
+  __typename?: 'User';
+  /** ユーザーのID */
+  id: Scalars['ID'];
+  /** ユーザー名 */
+  name: Scalars['String'];
+  /** アバター画像URL */
+  avatarUrl?: Maybe<Scalars['String']>;
+};
+
+export type ProjectsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ProjectsQuery = (
+  { __typename?: 'Query' }
+  & { projects?: Maybe<Array<Maybe<(
+    { __typename?: 'Project' }
+    & Pick<Project, 'id' | 'title' | 'whyDescription' | 'whatDescription' | 'howDescription' | 'imageUrlSmall' | 'imageUrlLarge'>
+    & { staffs?: Maybe<Array<Maybe<(
+      { __typename?: 'User' }
+      & Pick<User, 'id' | 'name' | 'avatarUrl'>
+    )>>> }
+  )>>> }
+);
+
+
+export const ProjectsDocument = gql`
+    query Projects {
+  projects {
+    id
+    title
+    whyDescription
+    whatDescription
+    howDescription
+    imageUrlSmall
+    imageUrlLarge
+    staffs {
+      id
+      name
+      avatarUrl
+    }
+  }
+}
+    `;
+
+/**
+ * __useProjectsQuery__
+ *
+ * To run a query within a React component, call `useProjectsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useProjectsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useProjectsQuery(baseOptions?: Apollo.QueryHookOptions<ProjectsQuery, ProjectsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProjectsQuery, ProjectsQueryVariables>(ProjectsDocument, options);
+      }
+export function useProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProjectsQuery, ProjectsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProjectsQuery, ProjectsQueryVariables>(ProjectsDocument, options);
+        }
+export type ProjectsQueryHookResult = ReturnType<typeof useProjectsQuery>;
+export type ProjectsLazyQueryHookResult = ReturnType<typeof useProjectsLazyQuery>;
+export type ProjectsQueryResult = Apollo.QueryResult<ProjectsQuery, ProjectsQueryVariables>;

graphql/queries/projects.graphql

@@ -0,0 +1,16 @@
+query Projects {
+  projects {
+    id
+    title
+    whyDescription
+    whatDescription
+    howDescription
+    imageUrlSmall
+    imageUrlLarge
+    staffs {
+      id
+      name
+      avatarUrl
+    }
+  }
+}

package.json

@@ -10,7 +10,8 @@
     "prepare": "husky install",
     "release:patch": "standard-version --release-as patch",
     "release:minor": "standard-version --release-as minor",
-    "release:major": "standard-version --release-as major"
+    "release:major": "standard-version --release-as major",
+    "gen": "graphql-codegen --config codegen.yml"
   },
   "husky": {
     "hooks": {
@@ -24,12 +25,17 @@
     ]
   },
   "dependencies": {
+    "@apollo/client": "^3.3.20",
+    "@graphql-codegen/typescript-operations": "^1.18.2",
+    "graphql": "^15.5.1",
     "next": "11.0.1",
     "next-seo": "^4.26.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "1.21.5",
+    "@types/node": "^15.12.4",
     "@types/react": "17.0.11",
     "autoprefixer": "^10.2.6",
     "eslint": "7.29.0",
@@ -42,6 +48,9 @@
     "prettier": "^2.3.1",
     "standard-version": "^9.3.0",
     "tailwindcss": "^2.2.2",
-    "typescript": "4.3.4"
+    "typescript": "4.3.4",
+    "@graphql-codegen/typescript-operations": "1.18.2",
+    "@graphql-codegen/typescript": "1.22.3",
+    "@graphql-codegen/typescript-react-apollo": "2.2.7"
   }
 }

pages/_app.tsx

@@ -1,18 +1,36 @@
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
 import { DefaultSeo } from 'next-seo'
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+  createHttpLink,
+} from '@apollo/client'
+
 import SEO from '../next-seo.config'
 import 'tailwindcss/tailwind.css'
 
+const isDev = process.env.NODE_ENV === 'development'
+
 const App = ({ Component, pageProps }: AppProps) => {
+  const httpLink = createHttpLink({
+    uri: isDev ? 'http://localhost:4000/graphql' : '',
+  })
+
+  const client = new ApolloClient({
+    link: httpLink,
+    cache: new InMemoryCache(),
+  })
+
   return (
-    <>
+    <ApolloProvider client={client}>
       <Head>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
       <DefaultSeo {...SEO} />
       <Component {...pageProps} />
-    </>
+    </ApolloProvider>
   )
 }
 export default App

pages/index.tsx

@@ -1,16 +1,30 @@
 import React from 'react'
 import { Layout } from '../components/Layout'
 import { NextSeo } from 'next-seo'
+import { useProjectsQuery } from '../generated/graphql'
 
 const Home: React.FC = () => {
-  return (
-    <Layout>
-      <NextSeo
-        title="Wantedly"
-        description="Wantedly Frontend Internship 選考課題"
-      />
-    </Layout>
-  )
+  const { data, loading } = useProjectsQuery()
+
+  if (loading) {
+    return <div>loading...</div>
+  } else {
+    return (
+      <Layout>
+        <NextSeo
+          title="Wantedly"
+          description="Wantedly Frontend Internship 選考課題"
+        />
+        <div>
+          {!data?.projects
+            ? null
+            : data.projects.map((project) => {
+                return <div key={project?.id}>{project?.title}</div>
+              })}
+        </div>
+      </Layout>
+    )
+  }
 }
 
 export default Home