Next.jsAPIルートを使用してGraphQLサーバーを構築する方法

公開: 2022-03-10
クイックサマリー↬このガイドでは、Next.jsAPIルートの基本について説明します。 まず、それらが何であるか、およびAPIルートがRESTまたはGraphQLAPIと比較して有用である理由を説明します。 次に、Next.jsとGithubAPIを使用して最初のGraphQLサーバーを構築する方法を段階的に説明します。

Next.jsは、本番環境に必要なすべての機能を備えた最高の開発者エクスペリエンスを提供します。 Next.jsAPIルートを使用してAPIを構築するための簡単なソリューションを提供します。

このガイドでは、最初にAPIルートとは何かを学習し、次にNext.jsAPIルートを使用してGithubAPIからデータを取得するGraphQLサーバーを作成します。

このチュートリアルを最大限に活用するには、少なくともGraphQLの基本的な理解が必要です。 Apollo Serverの知識は役に立ちますが、必須ではありません。 このチュートリアルは、ReactまたはNext.jsのスキルをサーバー側に拡張し、Next.jsとGraphQLを使用して最初のフルスタックアプリを構築できるようにしたい人に役立ちます。

それでは、に飛び込みましょう。

Next.js APIルートとは何ですか？

Next.jsは、クライアントやサーバーでReactアプリをレンダリングできるようにするフレームワークです。 バージョン9以降、Next.jsを使用して、Node.js、Express、GrapQLなどでAPIを構築できるようになりました。 Next.jsは、ファイルシステムを使用して、フォルダーpages/api内のファイルをAPIエンドポイントとして扱います。 つまり、URL https://localhost:3000/api/your-file-nameでAPIエンドポイントにアクセスできるようになります。

Reactから来て、Next.jsを使用したことがない場合、Next.jsはReactフレームワークであるため、これは混乱を招く可能性があります。 そして、すでに知っているように、Reactはフロントエンドアプリの構築に使用されます。 では、なぜバックエンドアプリとAPIにNext.jsを使用するのでしょうか。

Next.jsはReact、Node.js、Babel、Webpackで構築されているため、クライアント側とサーバー側の両方で使用できます。もちろん、サーバーでも使用できるはずです。 Next.jsはサーバーに依存してAPIルートを有効にし、技術的にはReactフレームワークであっても、お気に入りのバックエンド言語を使用できるようにします。 うまくいけば、あなたはそれを正しく理解します。

これまで、APIルートとは何かを学びました。 ただし、本当の問題は残っています。なぜNext.jsを使用してGraphQLサーバーを構築するのでしょうか。 GraphQLまたはNode.jsを使用してみませんか？ それでは、次のセクションでAPIを構築するためのNext.jsAPIルートを既存のソリューションと比較してみましょう。

Next.jsAPIルートとRESTおよびGraphQLの比較

GraphQLとRESTは、APIを構築するための優れた方法です。 それらは非常に人気があり、今日ではほとんどすべての開発者によって使用されています。 では、なぜReactフレームワークを使用してAPIを構築するのでしょうか。 簡単に言うと、Next.js APIルートは別の目的に使用されます。これは、APIルートを使用するとNext.jsアプリにバックエンドを追加して拡張できるためです。

Node.js、Express、GraphQLなどのAPIを構築するには、バックエンドに重点を置いているため、より優れたソリューションがあります。 私の意見では、APIルートをクライアント側と組み合わせて、Next.jsでフルスタックアプリを構築する必要があります。 APIルートを使用して単純なAPIを構築することは、Next.jsの機能を十分に活用していないようなものです。これは、すぐにバックエンドを追加できるReactフレームワークだからです。

既存のNextアプリに認証を追加する必要がある場合のユースケースを検討してください。 Node.jsまたはGraphQLを使用して認証部分を最初から構築する代わりに、APIルートを使用してアプリに認証を追加できます。これは、エンドポイントhttps://localhost:3000/api/your-file-nameで引き続き利用できます。 https://localhost:3000/api/your-file-name 。 APIルートはサーバー側のみのバンドルであるため、クライアント側のバンドルサイズは増加しません。

ただし、APIルートはクロスオリジンリソースシェアリング（CORS）ヘッダーを指定しないため、Next.jsAPIルートは同一生成元内でのみアクセスできます。 APIにCORSを追加することで、デフォルトの動作を微調整することもできますが、これは追加の設定です。 next exportを使用して静的に次のアプリを生成する場合—アプリ内でAPIルートを使用することはできません。

これまでのところ、APIルートが同様のソリューションと比較して優れたソリューションになる可能性があることを学びました。 それでは、手を汚して、GraphQLサーバーの構築を始めましょう。

ジャンプした後もっと！ 以下を読み続けてください↓

セットアップ

Next.jsで新しいアプリを開始するには、Create NextAppに進みます。 Webpackを使用して新しいアプリを手動で設定することもできます。 あなたはそうすることを歓迎します。 そうは言っても、コマンドラインインターフェイスを開いて次のコマンドを実行します。

 npx create-next-app next-graphql-server

Next.jsは、APIルートのスターターテンプレートを提供します。 次のコマンドを実行して使用できます。

 npx create-next-app --example api-routes api-routes-app

このチュートリアルでは、すべてを最初からやりたいので、スターターテンプレートではなく、Create NextAppを使用して新しいアプリを起動します。 次に、プロジェクトを次のように構成します。

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

前に述べたように、 apiフォルダーはAPIまたはサーバーが存在する場所です。 GraphQLを使用するため、GraphQLサーバーを作成するにはリゾルバーとスキーマが必要です。 サーバーのエンドポイントは、GraphQLサーバーのエントリーポイントであるパス/api/graphqlでアクセスできます。

このステップを進めると、サーバーのGraphQLスキーマを作成できるようになります。

GraphQLスキーマを作成する

簡単に要約すると、GraphQLスキーマはデータグラフの形状を定義します。

次に、Next.js内でApollo Serverを使用するには、 apollo-server-microをインストールする必要があります。

 yarn add apollo-server-micro

npmの場合

npm install apollo-server-micro

それでは、新しいGraphQLスキーマを作成しましょう。

api/schemas/index.js

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

ここでは、Githubユーザーの形状を表すUserタイプを定義します。 タイプIDのid 、 login 、およびタイプStringのavatar_urlが必要です。 次に、ユーザーの配列を返す必要があるgetUsersクエリの型を使用します。 次に、 getUserクエリを使用して単一のユーザーをフェッチします。 取得するには、ユーザーの名前を受け取る必要があります。

このGraphQLスキーマが作成されたら、リゾルバーファイルを更新し、上記のクエリを実行するための関数を作成できます。

GraphQLリゾルバーを作成する

GraphQLリゾルバーは、GraphQLクエリから応答を生成できるようにする一連の関数です。

Github APIからデータをリクエストするには、 axiosライブラリをインストールする必要があります。 したがって、CLIを開き、次のコマンドを実行します。

 yarn add axios

またはnpmを使用する場合

npm install axios

ライブラリがインストールされたら、リゾルバーファイルに意味のあるコードを追加しましょう。

api/resolvers/index.js

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

ここでわかるように、GraphQLスキーマで以前に定義されたクエリ名をリゾルバー関数と照合します。 getUsers関数を使用すると、APIからすべてのユーザーを取得し、 Userタイプをミラーリングする必要があるユーザーの配列を返すことができます。 次に、 getUserメソッドを使用して、パラメーターとして渡された名前を使用して1人のユーザーをフェッチします。

これで、GraphQLスキーマとGraphQLリゾルバーができました。これらを組み合わせてGraphQLサーバーを構築するときが来ました。

GraphQLサーバーを作成する

GraphQLサーバーは、データをGraphQLAPIとして公開します。 これにより、クライアントアプリは、必要なデータだけを正確に要求できるようになります。

api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

ApolloServerをインポートした後、それを使用して新しいインスタンスを作成し、スキーマとリゾルバーを渡してGraphQLサーバーを作成します。 次に、着信リクエストを解析しないようにNext.jsに指示し、GraphQLに処理させる必要があります。 最後に、 apolloServerを使用して新しいハンドラーを作成します。これは、パス/api/graphqlがGraphQLサーバーのエントリポイントとして機能することを意味します。

通常のApolloServerとは異なり、Next.jsはサーバー側のレンダリングに依存しているため、サーバーの起動を処理します。 そのため、ここでは、GraphQLサーバーを自分で起動する必要はありません。

すごい！ このステップを進めると、GraphQLサーバーが機能するかどうかをテストできるようになります。

GraphQLサーバーをテストする

プロジェクトのルートを参照したら、CLIでプロジェクトを開き、次のコマンドを実行します。

 yarn dev

またはnpmの場合

npm run dev

ここで、 https://localhost:3000/api/graphqlにアクセスし、以下にGraphQLクエリを追加して、Githubからすべてのユーザーを取得します。

 { getUsers { id login avatar_url } }
get-all-users
get-all-users。 （大プレビュー）

このクエリで1人のユーザーをフェッチできるかどうかを確認しましょう。

 query($name: String!){ getUser(name:$name){ login id avatar_url } }
get-user
get-user。 （大プレビュー）

すごい！ サーバーは期待どおりに機能します。 Next.jsAPIルートを使用してGraphQLサーバーの構築が完了しました。

結論

このチュートリアルでは、最初にそれらが何であるかを説明し、次にNext.jsを使用してGraphQLサーバーを構築することにより、Next.jsAPIルートについて説明しました。 Next.jsアプリにバックエンドを追加する機能は本当に素晴らしい機能です。 これにより、実際のバックエンドでアプリを拡張できます。 さらに進んでデータベースに接続し、APIルートを使用して完全なAPIを構築することもできます。 Next.jsを使用すると、APIルートを使用してフルスタックアプリを簡単に構築できます。

完成したプロジェクトはCodeSandboxでプレビューできます。

読んでくれてありがとう！

その他のリソース

これらの有用なリソースは、このチュートリアルの範囲を超えてあなたを連れて行きます。

  • APIルートの紹介（Next.js 9）
  • Next.jsAPIルート
  • APIルートミドルウェア