AdaloでGraphQLエンドポイントを追加する5つのステップ

このガイドでは、データベース駆動型ウェブアプリとネイティブiOS・Androidアプリ向けのノーコードアプリビルダーであるAdalo（Apple App StoreとGoogle Playに3プラットフォーム統一版を公開）にGraphQLを統合する完全なプロセスをご案内します。

このガイドでは、エンドポイントの準備からデプロイまで、GraphQLをAdaloに統合する完全なプロセスをご説明します。

主なステップ：

エンドポイントの準備：GraphQL APIのアクセス性、JSON形式、認証をテストします。
外部コレクションの作成：AdaloでGraphQLエンドポイントを接続し、認証を設定します。
クエリとミューテーションの定義：GraphQLクエリを使用してデータを取得し、ミューテーションでレコードを更新・作成します。
ヘッダーとパラメーターの設定：適切なヘッダー（例：Authorization）を確保し、データ解析用のJSONキーを指定します。
テストとデプロイ：データをアプリコンポーネントにバインドし、機能をテストして、アプリを公開します。

AdaloはレコードにID（数値）をサポートし、1秒あたり5リクエストのレート制限があります。これらの手順に従うことで、スムーズな統合と最適化されたアプリパフォーマンスが確保されます。有料プランでは無制限のデータベースレコードと使用量ベースの課金なしで、データ上限や予期しない請求を心配することなくGraphQL接続アプリをスケールできます。

AdaloがGraphQL統合に適している理由

必要なデータだけをリクエストできるGraphQLの能力は、Adaloのアーキテクチャと自然に相性が良いです。Adalo 3.0インフラの刷新による3〜4倍の高速パフォーマンスにより、アプリがスケールしても、GraphQLクエリのデータがユーザーに素早く返されます。レコード制限や使用量ベースの課金を課すプラットフォームとは異なり、Adaloの有料プランにはデータ上限がなく、外部コレクションはユーザーベースとともに成長できます。

Adaloのビルダー「Ada」は、やりたいことを説明するだけでアプリを生成します。Magic Startは説明からアプリの完全な基盤を作成し、Magic Addは自然言語で機能を追加します。

AIによるビルド支援機能は統合プロセスも簡略化します。Magic Addは自然言語で新機能を説明することができ、プラットフォームがGraphQLデータを表示するために必要な画面とロジックを生成します。X-Rayはユーザーへの影響が生じる前にパフォーマンスのボトルネックを特定し、アプリを遅くする可能性のあるクエリの最適化を支援します。

ステップ1：GraphQLエンドポイントの準備

GraphQL

統合プロセスに入る前に、エンドポイントが正しく機能していることを確認してください。これはフライト前チェックリストと考えてください：エンドポイントがアクセス可能で、適切なJSON形式でデータを返し、有効な認証を受け入れることを確認します。

エンドポイントのアクセス性の確認

GraphiQL、GraphQL Playground、またはPostmanなどのツールを使用してエンドポイントをテストすることから始めます。典型的なエンドポイントURLは次のようになります：https://api.example.com/graphql、/api/graphql、または/v1/graphql。

{ __typename }のような簡単なクエリを送信して、エンドポイントの到達可能性を確認し、正しく応答することを確かめます。次に、__schemaをクエリしてスキーマイントロスペクションが有効かどうかを確認します。これにより、利用可能なタイプ、フィールド、操作の詳細なマップが得られ、リクエストできるデータを理解するのに役立ちます。

GraphQLはエラーが発生してもHTTP 200 OKステータスを返すことが多いことに注意してください。エラーはレスポンスのerrors配列に表示されます。例えば、無効なフィールドをクエリして、レスポンスにGRAPHQL_VALIDATION_FAILEDエラーが含まれるかどうかを確認してみてください。

最後に、Adaloが必要とするJSON形式でレスポンスが構造化されていることを確認します。data、records、resourceなどのデータが存在するトップレベルキーに細心の注意を払ってください。この詳細は、AdaloでExternal Collectionを設定する際に重要です。

エンドポイントがアクセス可能で正しく形式化されていることを確認したら、認証設定の検証に進みます。

認証情報の収集

ほとんどのセキュアなGraphQLエンドポイントには認証が必要で、一般的なメソッドがいくつかあります：APIキー、パーソナルアクセストークン（PAT）、またはOAuth 2.0トークン（多くの場合JWT形式）。これらの資格情報は通常、次のようなHTTPヘッダーに追加されます：

Authorization: Bearer YOUR_TOKEN_HERE

一般的なサービスのクイックリファレンスは次のとおりです：


サービスプロバイダー	認証情報タイプ	ヘッダーキー	値の形式
Airtable	パーソナルアクセストークン	Authorization	Bearer [Token]
DreamFactory	APIキー	X-DreamFactory-API-Key	[Key]
任意のGraphQL API	JWT / OAuthトークン	Authorization	Bearer [Token]

これらの資格情報の入手場所はAPIプロバイダーによって異なります。Airtableの場合、アカウント設定のDeveloper Hubでパーソナルアクセストークンを作成できます。必要なスコープ（読み取り/書き込みアクセスなど）を割り当て、トークンがアクセスできるデータベースを指定してください。DreamFactoryの場合、APIキーはロールベースのアクセス制御を使用してプラットフォーム内で作成・管理されます。

認証をテストするには、GraphiQLまたはPostmanでクエリを送信する際にリクエストヘッダーに資格情報を含めます。エンドポイントが認証エラーではなくデータを返す場合は準備完了です。

ステップ2：AdaloでExternal Collectionを作成する

GraphQLエンドポイントが確認され、認証情報の準備ができたので、データソースをAdaloに接続する時です。このステップでは、外部データをアプリ内でシームレスに機能するコレクションに変換します。

外部コレクションへのナビゲート

Adalo Builderを開くことから始めます。左側のツールバーでDatabaseタブをクリックします（データベースアイコンを探してください）。「External Collections」セクションの下で+ Add Collectionを選択します。「Products」や「Users」など、扱うデータの種類を反映した名前をコレクションに付けます。後で統合が増えても整理しやすくなります。

名前が決まったら、エンドポイントと認証の詳細の設定に進みます。

エンドポイントと認証の設定

設定画面で、Base URLフィールドにGraphQLエンドポイントを入力します（例：https://api.example.com/graphql）。次に、Headersの下の+ Add Itemをクリックして認証を設定します。ヘッダー名を「Authorization」、値をBearer [Your_Token]として追加します。「Bearer」の後にスペースを入れることを忘れずに。

Adaloは外部コレクションのBasic AuthとOAuthの両方をサポートしています。ほとんどのGraphQLエンドポイントでは、APIキーまたはOAuthトークンでBasic Authを使用することが多いです。AdaloはGraphQLエンドポイントが標準的なREST形式のJSONでデータを返すことを期待していることに注意してください。

認証設定が完了したら、JSONレスポンスの解析を有効にする必要があります。

JSONレスポンス解析の有効化

GraphQLレスポンスは多くの場合、data、records、itemsなどの特定のJSONキー内にデータをネストします。Adaloがこの構造を正しく解釈できるよう、エンドポイント設定の「Get All Records」セクションでResults Keyを指定します。これはAdaloがJSONレスポンス内のレコードの配列を探す場所を示します。

このステップ中、データソースに少なくとも1つのレコードが存在することを確認してください。Run Testをクリックすると、AdaloはJSONレスポンスを分析し、テキスト、数値、日付フィールドなどのアプリに対応するプロパティを自動生成します。

現在AdaloはExternal CollectionでID（数値）のみをサポートしていることに注意してください。GraphQLエンドポイントがテキストベースのID、UUID、または特殊文字を含むIDを使用している場合は、回避策が必要な場合があります。n8nなどのプロキシサービスが、GraphQLレスポンスをAdalo互換のJSON形式に変換するのに役立ちます。

ステップ3：GraphQLクエリとミューテーションの定義

エンドポイントが確認され、外部コレクションが設定されたので、GraphQL操作をAdaloのデータアクションにリンクする時です。このステップは、アプリのインターフェースをGraphQLバックエンドに接続し、クエリとミューテーションを通じてシームレスなデータ取得と更新を可能にするために重要です。

データ取得のためのクエリの定義

AdaloのExternal CollectionはGet All、Get One、Create、Update、Deleteの5つの主要アクションをサポートしています。GraphQLでは、これらのアクションはすべて同じベースURLを使用し、データを取得する場合でもPOSTメソッドが必要です。従来のクエリ文字列の代わりに、GraphQLはクエリをリクエストボディに直接埋め込みます。

例えば、「Get All Records」エンドポイントを設定する場合、JSONボディを次のように形式化します：
{"query": "query { users { id name email } }"}。

Results KeyをAPIのレスポンス構造に合わせて設定します。APIの設計によっては、data.usersや単にusersなどになる場合があります。

エンドポイントを設定したら、Run Testをクリックしてコレクションプロパティを生成します。テスト前に外部データソースに少なくとも1つの完全なレコードが含まれていることを確認してください。すべてのレコードでフィールドが空の場合、設定中にAdaloはそのプロパティを検出しません。

クエリが設定されたら、データ更新のためのミューテーションの設定に進みます。

データ更新のためのミューテーションの設定

ミューテーションはGraphQLバックエンドでのレコードの作成、更新、削除に使用されます。「Create a Record」アクションの場合、リクエストボディのミューテーションを次のように形式化します：
{"query": "mutation CreateUser($name: String!, $email: String!) { createUser(name: $name, email: $email) { id name email } }", "variables": {"name": "VALUE", "email": "VALUE"}}。

"VALUE"をMagic Textに置き換えて、アプリからデータを動的に挿入します。

「Update a Record」アクションを設定する場合、構造は似ていますが、変更する特定のレコードIDも参照する必要があります。GraphQLはすべての操作にPOSTを使用しますが、特定のフィールドのみを更新する場合はメソッドをPATCHに調整できます。

各ミューテーションを設定したら、テストを実行してレスポンス構造が期待通りであることを確認します。Adaloには1秒あたり5リクエストというプラットフォームレート制限があることに注意してください。この制限を超えると429ステータスコードが返されます。ただし、AdaloのどのプランでもUsage-basedの課金がないため、高いリクエスト量による予期しない請求は心配ありません。レート制限内に収まるよう効率的にクエリを設計してください。

クエリとミューテーションのテストと動作確認が完了したら、次のステップであるヘッダーとパラメーターの設定に進む準備ができています。

ステップ4：リクエストヘッダーとパラメーターの設定

クエリとミューテーションの準備ができたので、次のステップはGraphQLエンドポイントとのシームレスな通信を確保するための適切なヘッダーとパラメーターの設定です。このステップは、身元を確認し、データを正しく形式化するために重要です。ヘッダーが欠落または不正確だとリクエストが失敗する可能性があります。

必要なヘッダーの追加

AdaloのすべてのGraphQLリクエストには、少なくともContent-TypeとAuthorizationの2つのヘッダーが必要です。データの形式を示すためにContent-Typeをapplication/jsonに設定します。AuthorizationヘッダーにはBearer [Your_API_Key]形式でAPIキーを含め、「Bearer」とトークンの間にスペースを入れることを確認します。

"Adalo APIへのすべてのリクエストには、次の2つのヘッダーが必要です：Authorization: Bearer [アプリのAPIキー] Content-Type: application/json"
– Adalo Resources

バックエンドによっては追加のヘッダーが必要な場合があります。例えば、DreamFactoryを使用している場合は、特定のキーを含むX-DreamFactory-API-Keyヘッダーを含める必要があります。Adaloでこれらのヘッダーを追加するには、「Headers and Queries」セクションに移動し、+Add Itemをクリックして、ヘッダー名と値を手動で入力します。

クエリパラメーターの定義

GraphQLは通常リクエストボディでデータを送信しますが、一部のAPIはフィルタリング、ページネーション、または認証などのタスクにクエリパラメーターを必要とします。Adaloでこれらのパラメーターを追加するには、External Collectionsの下でAdd Itemをクリックし、必要なパラメーター名と値を入力します。一部のAPIはヘッダーの代わりにクエリパラメーターを認証に使用することがあるため、精度を確保するためにAPIのドキュメントを必ず参照してください。

エンドポイントがネストされたデータを返す場合、Results Key（例：data.usersまたはrecords）を指定して、AdaloがレコードのJSONキーを見つけられるようにする必要があります。このステップは、複数のデータ層で構造化されたGraphQLレスポンスに特に重要です。

設定を検証するためのテストの実行

すべての設定が完了したら、Run Test機能を使用してエンドポイントにライブリクエストを送信します。テストが成功すると、AdaloはAPIのレスポンスに基づいてデータプロパティを自動的に検出し、マッピングします。テストを実行する前に、外部データソースに少なくとも1つの完全なレコードが含まれていることを確認します。

テストが失敗した場合は、Adaloモーダルに表示されるエラーメッセージを確認してください。一般的な問題には、認証エラー、形式が正しくないJSON、またはURLが間違っていることなどがあります。Show Full Responseオプションを使用して生データを検査し、必要なすべてのフィールドが返されていることを確認できます。

設定が正しく機能することを確認したら、次のステップでデータをバインドする準備ができています。

ステップ5：アプリのテスト、バインド、デプロイ

GraphQLエンドポイントが設定されテストされたので、データをアプリのインターフェースに接続してデプロイの準備をする時です。すべてが設定されたら、データをアプリのUIにシームレスにバインドできます。External CollectionはAdaloのネイティブデータソースと同様に機能します。

データを画面とコンポーネントにバインドする

GraphQLエンドポイントからデータを表示するには、まずアプリにListコンポーネントを追加します。データソースをExternal Collectionに設定します。「Run Test」フェーズ中に、AdaloはAPIレスポンスで利用可能なプロパティを自動的に検出し、Magic Textを通じてアクセス可能にします。

GraphQLレスポンスから特定のデータフィールドをアプリのUIにマッピングするには、コンポーネント設定（例：Title、Subtitle、Image）のMagic Textアイコンをタップし、対応するJSONキーを選択します。詳細画面では、Add Action > Link > New Screenの手順でリストアイテムを新しい画面にリンクできます。Adaloは「Current [Collection Item]」データを新しい画面に自動的に渡し、選択したレコードの特定の詳細を表示するためにMagic Textを使用できます。

GraphQLスキーマが変更されたり、新しいフィールドが追加された場合は、Databaseタブに戻り、External Collection設定を更新し、接続テストを再実行して新しいフィールドをエディターで使用可能にします。Adaloのビジュアルビルダーは「PowerPointのように簡単」と表現されており、コードを触ることなく新しいデータフィールドに合わせてUIを素早く調整できます。

アプリのプレビューと公開

プレビューボタンをクリックして、データが正しく読み込まれ、すべてのアクションが期待通りに機能することを確認します。Adalo 3.0のインフラによる3〜4倍の高速パフォーマンスにより、複雑なクエリでもGraphQLデータが素早く読み込まれます。

すべてが機能していることを確認したら、Adaloのシングルコードベースシステムを使用してウェブ、iOS App Store、Android Play Storeにアプリを公開できます。加えた更新はすべてのプラットフォームに自動的に反映されるため、それぞれ再構築する必要はありません。これは、モバイルアプリがウェブラッパーとして別々の管理が必要で、ウェブとモバイルデプロイメント間で更新が自動同期されないBubbleなどのプラットフォームに対する大きな利点です。

パフォーマンスの監視と問題のデバッグ

アプリが公開されたら、AdaloのX-Rayツールがパフォーマンスを分析し、統合の問題をトラブルシューティングするのに役立ちます。X-Rayはユーザーへの影響が生じる前に潜在的なボトルネックを特定し、GraphQL統合に影響を与える可能性のある遅いクエリや非効率なデータ関係を強調表示します。

APIレート制限に達しないように、リクエスト頻度に注意してください。注意すべき一般的な問題には、大きなペイロードによるタイムアウトエラーや、ヘッダーが欠落または不正確なことによる認証の問題があります。定期的な監視により、アプリがユーザーにとってスムーズに動作し続けます。

Adaloのモジュラーインフラは月間アクティブユーザー100万人以上のアプリにスケールするため、GraphQL接続アプリはプラットフォームが課す上限に達することなく成長できます。ワークロードユニットに基づいて課金したりレコード制限を課すプラットフォームとは異なり、Adaloのアーキテクチャはスケール時のパフォーマンスを維持し、予期しないコストが発生しません。

まとめ

AdaloアプリにGraphQLエンドポイントを追加すると、データ取得が簡略化され、大規模なカスタムコーディングの必要性が減ります。エンドポイントの準備、External Collectionの設定、クエリとミューテーションの定義、ヘッダーの設定、徹底的なテストというこの5つのステップに従うことで、フロントエンドを効率的でユーザーフレンドリーに保ちながら、堅牢な外部バックエンドにアプリを接続できます。

組織は週あたり最大15時間の手動データ入力を節約し、カスタム開発と比較してコストを65%削減できたと報告しています。

"GraphQLを使用すると、既存のデータを使用してAPIクエリに答えることができます…顧客が必要な情報だけをリクエストし、それ以上は要求しない力を提供します。" - n8n

パフォーマンス向上のため、PUTの代わりにPATCHの使用を検討し、1秒あたり5リクエストのレート制限内に収まるようにフィルターを適用し、AdaloのX-Rayツールを使用して潜在的な問題を特定してください。これらの小さな調整がアプリのレスポンシブ性を大幅に改善できます。

月額$36からのAdalo Professionalプランは、無制限のデータベースレコードと使用量ベースの課金なしでExternal Collectionへのアクセスを提供します。これによりエンジニアリング時間の即座の節約が実現し、アプリのスケールが容易になります。GraphQLを使用すると、コーディングなしでデータがリスト、フォーム、アクションにシームレスに統合されます。

よくある質問

他のアプリ構築ソリューションよりAdaloを選ぶ理由は？

AdaloはAI搭載のアプリビルダーで、真のネイティブiOS・Androidアプリを作成します。ウェブラッパーとは異なり、ネイティブコードにコンパイルし、単一のコードベースからApple App StoreとGoogle Play Storeの両方に直接公開します。アプリローンチの最も難しい部分が自動的に処理されます。

App Storeにアプリを構築して公開する最速の方法は？

AdaloのドラッグアンドドロップインターフェースとMagic Start、Magic AddなどのAI支援ビルド機能を使用すると、すばやくアプリを作成できます。プラットフォームがApp Store申請プロセス全体を処理するため、証明書、プロビジョニングプロファイル、アプリレビューガイドラインを手動で管理することなく、アイデアから公開済みアプリへと進むことができます。

GraphQLエンドポイントがAdaloで正常に動作することを確認するには？

エンドポイントが標準的なGraphQLクエリとミューテーションをサポートしていることを確認することから始めます。GraphiQL、GraphQL Playground、またはPostmanを使用してテストを実行し、適切に構造化されたJSONレスポンスを配信することを確認します。エンドポイントがアクセス可能で、AdaloがExternal Collectionに必要とする数値IDでデータを返すことを確認します。

AdaloでGraphQLエンドポイントを接続するためにどのような認証タイプが使用できますか？

AdaloはGraphQLエンドポイントのAPIキー、OAuthトークン、JWTベースの認証をサポートしています。「Bearer [Your_Token]」形式でAuthorizationヘッダーに資格情報を追加します。具体的なメソッドはAPIプロバイダーの要件によって異なります。

AdaloでGraphQLを使用する際のアプリパフォーマンス向上の最良の方法は？

部分的な更新にはPUTの代わりにPATCHを使用し、ペイロードサイズを減らすためにフィルターを適用し、1秒あたり5リクエストのレート制限内に収まるようにしてください。AdaloのX-Rayツールはユーザーへの影響が生じる前にパフォーマンスのボトルネックを特定し、遅いクエリや非効率なデータ関係の最適化を支援します。

AdaloでGraphQL接続アプリを構築するのにどのくらい時間がかかりますか？

GraphQLエンドポイントがすでに準備できていれば、Adaloに接続して数時間で機能するアプリを構築できます。Magic Startは説明からアプリの完全な基盤を生成し、「PowerPointのように簡単」と表現されるビジュアルビルダーを使用すると、コーディングなしで画面を作成してデータをバインドできます。

AdaloでGraphQLを統合するためにコーディング経験は必要ですか？

コーディングは必要ありません。AdaloのExternal Collections機能がGraphQL統合の技術的な複雑さを処理します。ビジュアルインターフェースを通じてエンドポイント、ヘッダー、クエリを設定し、Magic Textを使用すると、コードを書かずにデータをUIコンポーネントにバインドできます。

AdaloでGraphQL接続アプリを構築するのにかかるコストは？

Adalo Professionalプランは月額$36からで、External Collection、無制限のデータベースレコード、使用量ベースの課金なしが含まれます。ワークロードユニットに基づいて課金するBubbleなどのプラットフォームとは異なり、Adaloの価格設定は予測可能で、請求額が突然増えることはありません。

GraphQL接続アプリをApp Storeに公開できますか？

はい。Adaloは単一のコードベースからApple App StoreとGoogle Play StoreにネイティブのiOS・Androidアプリを直接公開します。更新はすべてのプラットフォームに自動的に同期されます。プラットフォームごとに再構築や再申請する必要はありません。

GraphQLデータが大幅に増加した場合はどうなりますか？

Adaloの有料プランにはレコード制限がないため、External Collectionはデータに合わせてスケールできます。プラットフォームのモジュラーインフラは月間アクティブユーザー100万人以上のアプリをサポートし、Adalo 3.0バックエンドは以前のバージョンより3〜4倍の高速パフォーマンスを提供します。