Graphql-query

提供：Dev Guides
移動先:案内、検索

GraphQL-クエリ

GraphQL操作は、読み取り操作または書き込み操作のいずれかです。 GraphQLクエリは値の読み取りまたはフェッチに使用され、突然変異は値の書き込みまたはポストに使用されます。 どちらの場合でも、操作はGraphQLサーバーが特定の形式のデータで解析して応答できる単純な文字列です。 モバイルおよびWebアプリケーションで通常使用される一般的な応答形式はJSONです。

クエリを定義する構文は次のとおりです- 

//syntax 1
query query_name{ someField }

//syntax 2
{ someField }

以下はクエリの例です- 

//query with name myQuery
query myQuery{
   greeting
}

//query without any name
{
   greeting
}

上記の例から、クエリキーワードがオプションであることは明らかです。

GraphQLクエリは、データの過剰なフェッチを減らすのに役立ちます。 Restful APIとは異なり、GraphQLでは、ユーザーはサーバーから取得するフィールドを制限できます。 これは、ネットワーク上のクエリが小さくなり、トラフィックが少なくなることを意味します。これにより、応答時間が短縮されます。

図1-カスタムフィールドを使用した学生モデルのクエリ

この例では、jsonファイルに格納された学生のセットがあります。 各学生モデルには、firstName、lastName、idなどのフィールドがありますが、fullNameはありません。 ここでは、すべての学生のfullNameを取得するクエリを作成する方法について説明します。 そのためには、両方のスキーマリゾルバーでfullNameフィールドを作成する必要があります。

以下の手順を使用してこの図を行う方法を見てみましょう-

ステップ1-プロジェクトに必要な依存関係をダウンロードしてインストールする

*query-app* という名前のフォルダーを作成します。 端末からディレクトリを *query-app* に変更します。 後で、環境設定の章で説明されている手順3〜5に従います。

ステップ2-スキーマを作成する

プロジェクトフォルダquery-appに schema.graphql ファイルを追加し、次のコードを追加します- 

type Query {
   greeting:String
   students:[Student]
   studentById(id:ID!):Student
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   fullName:String
}
*students.json* ファイルには_fullName_フィールドがないことに注意してください。 ただし、クエリを介して生徒の_fullname_を取得する必要があります。 この場合の_fullName_は、データソースでは使用できないカスタムフィールドになります。

ステップ3-リゾルバーを作成する

プロジェクトフォルダにファイル resolvers.js を作成し、次のコードを追加します- 

const db = require('./db')
const Query = {
  //resolver function for greeting
   greeting:() => {
      return "hello from  finddevguides !!!"
   },

  //resolver function for students returns list
   students:() => db.students.list(),

  //resolver function for studentbyId
   studentById:(root,args,context,info) => {
     //args will contain parameter passed in query
      return db.students.get(args.id);
   }
}

//for each single student object returned,resolver is invoked

const Student = {
   fullName:(root,args,context,info) => {
      return root.firstName+":"+root.lastName
   }
}

module.exports = {Query,Student}

ステップ4-アプリケーションを実行する

*server.js* ファイルを作成します。 環境設定の章の手順8を参照してください。 ターミナルでコマンド_npm_ startを実行します。 サーバーは9000ポートで稼働します。 ここでは、GraphiQLをクライアントとして使用して、アプリケーションをテストします。

ブラウザーを開き、URL http：//localhost：9000/graphiql を入力します。 エディタで次のクエリを入力します- 

{
   students{
      id
      fullName
   }
}

クエリの応答は以下のとおりです- 

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "fullName": "Mohtashim:Mohammad"
         },

         {
            "id": "S1002",
            "fullName": "Kannan:Sudhakaran"
         },

         {
            "id": "S1003",
            "fullName": "Kiran:Panigrahi"
         }
      ]
   }
}
*server.js* を作成し、次のコードを追加します-
const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');

const db = require('./db');
const port = 9000;
const app = express();

//loading type definitions from schema file
const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})

//loading resolvers
const resolvers = require('./resolvers')

//binding schema and resolver
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})

//enabling cross domain calls and form post
app.use(cors(), bodyParser.json());

//enabling routes
const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

//registering port
app.listen(port, () => console.info(`Server started on port ${port}`));

ターミナルでコマンドnpm startを実行します。 サーバーは9000ポートで稼働します。 ここでは、GraphiQLをクライアントとして使用して、アプリケーションをテストします。

ブラウザを開き、URL http：//localhost：9000/graphiql を入力します。 エディタで次のクエリを入力します- 

{
   students{
      id
      fullName
   }
}

クエリの応答は以下のとおりです- 

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "fullName": "Mohtashim:Mohammad"
         },
         {
            "id": "S1002",
            "fullName": "Kannan:Sudhakaran"
         },
         {
            "id": "S1003",
            "fullName": "Kiran:Panigrahi"
         }
      ]
   }
}

図2-ネストされたクエリ

学生の詳細と大学の詳細を取得するためのネストされたクエリを作成しましょう。 同じプロジェクトフォルダーで作業します。

ステップ1-スキーマの編集

スキーマファイルには既に_student_フィールドがあります。 フィールドカレッジを追加して、そのタイプを定義しましょう。 

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   fullName:String
   college:College
}

ステップ2-resolver.jsを変更する

以下のように大学リゾルバ関数を追加する必要があります。 大学リゾルバ関数は、返された各学生オブジェクトに対して実行されます。 この場合のリゾルバーのルートパラメーターには、_student_が含まれます。 

const Student = {
   fullName:(root,args,context,info) => {
      return root.firstName+":"+root.lastName
   },
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}
module.exports = {Query,Student}

リゾルバは、カレッジコレクションのgetメソッドを呼び出して_collegeId_を渡すことにより、各学生のカレッジを返します。 _collegeId_を介してStudentとCollegeの間に関連付け関係があります。

ステップ3-アプリケーションをテストする

ターミナルウィンドウを開き、プロジェクトフォルダーに移動します。 コマンド-npm startを入力します。 ブラウザを起動し、URL http：//localhost：9000/graphiql を入力します。

GraphiQLウィンドウで次のクエリを入力します- 

{
   students{
      id
      firstName
      college {
         id
         name
         location
         rating
      }
   }
}

クエリの応答は以下のとおりです- 

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "firstName": "Mohtashim",
            "college": {
               "id": "col-102",
               "name": "CUSAT",
               "location": "Kerala",
               "rating": 4.5
            }
         },

         {
            "id": "S1002",
            "firstName": "Kannan",
            "college": {
               "id": "col-101",
               "name": "AMU",
               "location": "Uttar Pradesh",
               "rating": 5
            }
         },

         {
            "id": "S1003",
            "firstName": "Kiran",
            "college": {
               "id": "col-101",
               "name": "AMU",
               "location": "Uttar Pradesh",
               "rating": 5
            }
         }
      ]
   }
}

クエリ変数とは何ですか？

クエリに渡す動的な値がある場合、変数を使用してこれらの動的な値を表します。 したがって、クライアントアプリケーションでクエリを再利用できます。

図

クエリ変数を理解するための簡単なアプリケーションを作成しましょう。

ステップ1-スキーマファイルの編集

文字列パラメーターを取り、文字列を返す_sayHello_フィールドを追加します。 クライアントアプリケーションでは、名前の値は動的になります。 

type Query {
   sayHello(name:String!):String
}

ステップ2-resolver.jsファイルの編集

以下のようにパラメータを取る_sayHello_リゾルバを追加します- 

sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`

ステップ3-GraphiQLでクエリ変数を宣言する

変数は、変数名の後に$を付けて宣言されます。 例：$ myname_Variable。

$ myname_Variableを宣言したら、名前付きクエリ構文で使用する必要があります。 クエリ、myQueryは文字列値を取り、以下に示すようにsayHelloに渡します- 

query myQuery($myname_Variable:String!) {
   sayHello(name:$myname_Variable)
}

GraphiQLクライアントのQuery Variablesセクションで、$ myname_Variableの値をJSONオブジェクトとして設定します。 

{
   "myname_Variable": "Mohtashim"
}

上記のコードの出力は次のとおりです- 

{
   "data": {
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

クエリ変数GraphiQL

Enumでクエリ変数を使用する方法

フィールドパラメータが enum type の場合のクエリ変数の使用方法を見てみましょう。

ステップ1-schema.graphqlファイルの編集

enum ColorType {
   RED
   BLUE
   GREEN
}

type Query {
   setFavouriteColor(color:ColorType):String
}

_setFavouriteColor_関数は、enumを入力として受け取り、文字列値を返します。

ステップ2-resolvers.jsファイルの編集

リゾルバー関数_setFavouriteColor_は、_root_と_args_を取ります。 実行時に関数に渡される列挙値には、argsパラメーターを使用してアクセスできます。 

setFavouriteColor:(root,args) => {
   return  "Your Fav Color is :"+args.color;
}

ステップ3-GraphiQLでクエリ変数を宣言する

クエリの名前は query_to_setColor で、ColorTypeの名前color_variableの変数を取ります。 この変数は、setFavouriteColorメソッドに渡されます。 

query query_to_setColor($color_variable:ColorType) {
   setFavouriteColor(color:$color_variable)
}

GraphiQLのクエリ変数セクションで、次のコードを入力します- 

{
   "color_variable":"RED"
}

応答は以下に示されています- 

{
   "data": {
      "setFavouriteColor": "Your Fav Color is: RED"
   }
}

クエリ変数の宣言

「https://www.finddevguides.com/index.php?title=Graphql-query&oldid=27135」から取得
Powered by MediaWiki