Zenn
🙆

React + GraphQL + Apolloを触ってみる ~ 1. GraphQLの環境構築まで ~

2023/03/09に公開
GraphQL
React
JavaScript
Apollo
tech

Reactリハビリ＆ちゃんと触れていなかったGraphQLに触ってみるという目的でApollo使ってToDo的なものを作ってみる

基本自分用メモなので読みづらいのはご勘弁を

目次

  1. GraphQLの環境構築まで
  2. ToDoリストの読み込みまで
  3. Firebaseの準備とGraphQLとの連携部分まで
  4. ToDoの追加・編集・削除まで

環境構築

ディレクトリ構成

サーバ側(server)とフロント側(client)用のディレクトリを切ってその下に環境作っていく

apollo-sample
|-- client
|   `-- src
|       |-- components
|       |-- mutations
|       |-- pages
|       |-- queries
|       `-- types
`-- server
    `-- src
        |-- resolvers
	|-- index.mjs
	|-- resolvers.js
	`-- schema.js

サーバ側

Node.js(Express)でさくっと構築する

インストール

mkdir apollo-sample && cd $_
mkdir server && cd $_
yarn init -y
yarn add @apollo/server graphql express body-parser cors

@apollo/serverのバージョンは4.4.1

ESMのTS化がよく分からなかったのでサーバ側は一旦JSで
TSにできそうなら後々する

Hello World

src/index.jsmを作成してHello Worldを書いていく

src/index.jsm
import { ApolloServer } from '@apollo/server'
import { expressMiddleware } from '@apollo/server/express4'
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer'
import express from 'express'
import http from 'http'
import cors from 'cors'
import bodyParser from 'body-parser'

const typeDefs = `#graphql
  type Query {
    hello: String
  }
`

const resolvers = {
  Query: {
    hello: () => 'Hello GraphQL'
  }
}

const app = express()
const httpServer = http.createServer(app)

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
})

await server.start()

app.use(
  cors(),
  bodyParser.json(),
  expressMiddleware(server)
)

const port = 4000

await new Promise((resolve) => {
  httpServer.listen({ port }, resolve)
})

console.log(`🚀 Server ready at http://localhost:${port}`);

type: moduleの追加と起動コマンドを設定

package.json
+   "type": "module",
+   "scripts": {
+     "dev": "node src/index.mjs"
+   },

yarn devを実行してhttp://localhost:4000 でプレイグラウンドが表示されることを確認

フロントエンド

フロントは慣れてるNext.jsで作る

準備

こちらを参照

https://zenn.dev/k_tada/articles/293cc442390b13

Apolloクライアント追加

yarn add @apollo/client graphql

_app.tsxでApolloクライアントのProviderを設定しておく

src/pages/_app.tsx
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
import { AppProps } from 'next/app'

const cache = new InMemoryCache()
const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache,
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default MyApp

GraphQLからデータを読み込む

src/pages/index.tsx
import { useQuery, gql } from '@apollo/client'
import { NextPage } from 'next'

interface IndexPageProps {}

const QUERY = gql`
  query hello {
    hello
  }
`

const IndexPage: NextPage<IndexPageProps> = (props: IndexPageProps) => {
  const { loading, error, data } = useQuery(QUERY)
  if (loading) {
    return (
      <div>loading..</div>
    )
  }

  if (error) {
    return (
      <div>error: {error.message}</div>
    )
  }

  return (
    <div>{data.hello}</div>
  )
}
export default IndexPage

yarn devを実行してhttp://localhost:3000 でGraphQLから取得したメッセージが表示されていればOK

次はToDoリストを作っていく

Discussion