GraphQL初心者のためのバックエンド/フロントエンドのサンプルコード

そろそろGraphQLぐらい入れとくか…と思ったのですが、あれこれ作り込んだシステムに入れる時に意外と面倒というかどこから手をつければいいのかわからなかったというかそもそもGraphQLってどういうものなのん？　という状態でしたので、いったんシンプルな構成のサンプルを用意してみました。
似たようなことでお困りのかたがいらしたら参考になればと思います。

ちなみに基本のやり方をChatGPTに作ってもらった結果、バックエンドはExpress、フロントエンドはReactになりました。
Docker上で動くようになっています。

※Docker化と諸々の微調整については自分でやりました。

コードの解説

バックエンド側について

バックエンドのベースはExpressです。ExpressのGraphQLプラグインを使用しています。

フィールドを増やすには、 buildSchema と root の内容をそれぞれ修正します。

GraphQLそのものとはまったく関係ないところですが、フロントエンドとバックエンドを動かすポートが異なるため、バックエンド側にCORSの設定を入れる必要があるという点が要注意ポイントです。

backend/server.js

const express = require('express');
const cors = require('cors');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
const schema = buildSchema(`
  type Query {
    hello: String
    hello2: String
  }
`);

// The root provides a resolver function for each API endpoint
const root = {
  hello: () => 'Hello, GraphQL!',
  hello2: () => 'Hello2, GraphQL!',
};

const app = express();

app.use(cors());
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true, // Enable GraphiQL for testing the API in the browser
}));

app.listen(3000, () => {
  console.log('GraphQL server running at http://localhost:3000/graphql');
});

フロントエンド側について

フロントエンドのベースはReactです。GraphQLクライアントとしては一番有名なApolloが使われています。

バックエンド側で提供しているスキーマには hello と hello2 いう名前のフィールドがありますが、フロントエンド側からは hello フィールドだけを取りに行かせています。

frontend/src/App.js

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:3001/graphql', // Replace with your server URL
  cache: new InMemoryCache()
});

const GET_HELLO = gql`
  query {
    hello
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>[Error] {error.toString()}</p>;

  return (
    <div>
      <h1>{data.hello}</h1>
    </div>
  );
}

function AppWrapper() {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

export default AppWrapper;

補足：フロントエンド側のGraphQLクライアントライブラリについて

GraphQLのクライアント側といえばApolloしか知らなかったので不安になっていちおう調べたのですが、個人的に最近の流行りを掴むならとりあえずココ、と考えている以下のサイトでもApolloが推されていましたので、現段階での一番初めの選択肢としてはやはりApolloということで間違いはないようです。

ちなみにGraphQL関連だけのロードマップもありました。

このあたりは本当に追いかけ始めるとキリがないですね…。