Blog

GraphQLまたはRESTAPI？ヘッドレスCMSからコンテンツを取得するための最良の方法は何ですか？また、欠点はありますか？

この記事では、Kontentの新しいネイティブGraphQLエンドポイントを紹介し、開発者の観点からGraphQLの利点を説明し、JavaScriptでの使用方法を示し、GraphQLをREST APIと比較して、一方が他方よりも大幅に優れているかどうかを確認します。 。

GraphQLとは何ですか？

GraphQLは、データをフェッチする方法です。これはRESTAPIの代替手段であり、多くの人がデータを取得する「新しい」方法と呼んでいます。 GraphQLを使用する主な理由は次のとおりです。

• 必要なデータのみを取得します
• APIの詳細を学ぶために、ドキュメントを何時間も勉強する必要はありません
• 1つのクエリで複数のデータソースを組み合わせることができます

単純なGraphQLクエリは次のようになります。

 query { content_All (limit: 3){ items { title, teaser { html }, localSlug } } }

注： contentこの文脈では、コンテンツタイプのコードネームです。

そのページに必要なのはそれだけなので、Webサイトのホームページのタイトル、ティーザー、および3つの記事のスラッグをフェッチします。応答は最小限のJSONです。

 { 'data': { 'content_All': { 'items': [ { 'title': 'Flexbox vs Grid - How...', 'teaser': { 'html': '
There are so many...' }, 'localSlug': 'flexbox-vs-grid' }, { 'title': 'Can You Switch Your Headless...', }, { 'title': 'Gatsby source plugin...', } ] } } }

では、「ドキュメントを読む必要がない」という点はどこにあるのでしょうか。記事があり、それぞれにタイトルとティーザーがあることを実際にどのようにして知ることができますか？

GraphQLにはスキーマが付属しています。これはすべてのコンテンツのマップであり、クエリを作成してテストできるGraphiQLまたはGraphQL Playground（オンラインで動作）の優れた情報源です。それを見てみましょう。

GraphQLクエリを作成してテストする

オンライン遊び場を開きます。まず、KontentエンドポイントURLを追加する必要があります。これはhttps://graphql.kontent.ai/ です。

遊び場に入るときは、右側の[スキーマ]タブを展開します。プロジェクトの生成されたスキーマが表示されます。

しかし、それは最良の部分ではありません。左側に、次のクエリ構文を記述します。

 query { }

そして、中括弧内にカーソルを置いてCTRL + SPACE（Macの場合はOPTION + SPACE）を押します。利用可能なすべてのデータを示すIntelliSenseポップアップが表示されます。

プロジェクトの完全な構造を知っている必要も、APIの詳細を理解している必要もありません。利用可能なアイテムをナビゲートし、ユースケースに必要なデータとプロパティをマークできます。中括弧は現在のアイテムを展開し、括弧はフィルタリング、制限、および順序付けを可能にします。再生ボタンはクエリを実行し、フェッチされたデータを表示します。

プロジェクトで試して、プロジェクトに役立つクエリを作成してください。

JavaScriptプロジェクトでのGraphQLの使用

クエリができたので、JSプロジェクトでどのように使用できますか？

REST APIでは、Axios、Request、Fetch（現在はブラウザーで広く利用可能）などのサードパーティツールを利用してクエリを作成および実行することに慣れていました。 GraphQLでは、Apolloクライアントを使用する必要があります。

 npm install @apollo/client graphql

クライアントを作成し、適切なエンドポイントを使用するように構成します。

 import { ApolloClient, InMemoryCache } from '@apollo/client' ... const client = new ApolloClient({ cache: new InMemoryCache(), uri: 'https://graphql.kontent.ai/'/ })

注：Reactを使用していて、アプリ全体の多くのページでクライアントが必要な場合は、ReactアプリをラップしてApolloProvider コンポーネントを使用できます。 useQueryを使用してデータをフェッチします。

次に、GraphQLクエリを使用してデータのフェッチを開始できます。

 import { gql, useQuery } from '@apollo/client' ... const response = await client.query({ query: gql` query { content_All (limit: 3){ items { title, teaser { html }, localSlug } } } }) console.log(response)

クライアントはデータをJSONで返すため、コンポーネントで直接使用できます。

 response.data.content_All.items.map((article) => 
 )

GraphQLとRESTAPI

では、GraphQLとREST APIのどちらが優れているのでしょうか？簡単な長所と短所のリストを作成しましょう：

明確な勝者はいないのではないかと思います。いつものように、それはあなたのプロジェクトとその要件に依存します。

GraphQLは元々、複数のソースからのデータフェッチを合理化するために作成されました。これにより、開発者は、ドキュメントを読むのに半日を費やすのではなく、実装に集中できます。そしてそれは完璧にそれを行います。 GraphQLは、Kontentのコンテンツ、Shopifyの製品、PostgreSQLデータベースのユーザーデータなどを必要とする大規模なプロジェクトのデータフェッチの簡素化に大きな違いをもたらします。このトピックに興味がある場合は、 Apolloに関する私の記事をチェックしてください。

主に単一のソース（ヘッドレスCMS）からのコンテンツを扱う小規模なプロジェクトの場合、GraphQLは目新しいものではありません。 GatsbyやGridsomeですでに見たことがあり、開発速度に大いに役立つことを学びました。クエリを適切なサイズに保つことができれば、多くの欠点はありません。特に今、KontentがグローバルFastlyCDNでホストされているネイティブGraphQLエンドポイントを備えている場合。

結論

この記事では、GraphQLとは何か、RESTAPIとの比較について説明しました。プロジェクトのエンドポイントに接続されたビジュアルビルダーを使用してGraphQLクエリを構築する方法と、JavaScriptプロジェクトでGraphQLを使用してコンテンツをフェッチする方法を示しました。

GraphQLとReactに興味がある場合は、GitHubでKontent ReactGraphQLサンプルアプリを確認してください。また、ご質問やご意見がございましたら、 Discordに参加してお知らせください。