GraphQLについて

NAVER Instanceでは、かなりのGraphQLを使用しています.reactベースのビューに必要なデータは、GraphQL+24579142の組合せによって呼び出される.しかし、使うよりも根本的な理解があるのではないかと疑う人もいるので、この機会に整理しておきたいと思います.

GraphQLは

Apolloは、Webクライアントがサーバから効率的にデータを取得するために作成したクエリー言語である.
したがって、クライアントがgraphqlによって作成されたクエリーをサーバ側に移行すると、サーバはクエリーを受信して処理し、結果をクライアントに返します.

Rest APIとの比較

実は双方の存在目的はあまり違わない.クライアントがデータを要求すると、サーバはデータに応答してクライアントに渡します.
しかし、明らかな違いがあります.

エンドポイント:gqlはurlとメソッドの組合せであり、複数のエンドポイントがある.Rest APIは、各モードタイプのクエリが異なるため、エンドポイントを有する.

GraphQLクエリー

端点の意味を見てみましょう.
クライアントがgql言語でクエリー文を記述し、サーバ側に送信することを理解しました.では、クエリー文を作成するにはどうすればいいのでしょうか.例を見てみましょう.

query getStudentInfomation($studentId: ID){
  personalInfo(studentId: $studentId) {
    name
    address1
    address2
    major
  }
  classInfo(year: 2018, studentId: $studentId) {
    classCode
    className
    teacher {
      name
      major
    }
    classRoom {
      id
      maintainer {
        name
      }
    }
  }
  SATInfo(schoolCode: 0412, studentId: $studentId) {
    totalScore
    dueDate
  }
}

gqlは、Rest APIという名前のクライアント側で作成されたstudentIdであり、inputのような対応するデータを要求している.しかし、いくつかの特別な点があります.要求されたデータには多くの種類があります.personalInfo、classInfo、およびSATInfoは、これら3つのデータ情報を同時に要求する.Rest APIなら/personalInfo?studentId=123/classInfo?studentId=1233回の要求が必要であるが、gqlは、1つのエンドポイントに必要な様々なデータを要求することによって、効率的な呼び出しを実現することができる.
関数を使用して複数のクエリーを一度に処理する方法を오퍼레이션 네임 쿼리と呼びます.
この変化により、フロントエンド開発者は、バックエンドの従来のAPI要求/応答方法への依存を低減し、フロントエンド開発者がフロントエンドに必要なデータ要求/応答方式を独自にカスタマイズし、効率的なリソースで作業することができる.

受信したクエリー文の処理

クライアントでは、サーバ定義のモードに基づいてクエリー文を自由に作成し、サーバに正常に到達できます.この場合、サーバはこのクエリ文をどのように処理しますか?
node.jsとmongodb環境に基づく

まず、受信したクエリ文をグループ化する必要があります.しかし、幸いなことに、gqlライブラリはパーティション化を支援することができます.

の後、各クエリに所定のinputがあり、アーキテクチャに表示されるデータを返すように、サーバに関数を作成する必要があります.この関数は리졸버と呼ばれます.
左利きの戻り値は、他の左利きの出力データの1つとして使用できることに注意してください.したがって、同じタイプのデータを呼び出す場合、このように最適化することができる.

// user(id: ID)가 paymentsByUser(userId: ID) 안에서 호출될 수 있음
type Query {
  users: [User]
  user(id: ID): User
  limits: [Limit]
  limit(UserId: ID): Limit
  paymentsByUser(userId: ID): [Payment]
}

type Payment {
	id: ID!
	limit: Limit!
	user: User!
	pg: PaymentGateway!
	productName: String!
	amount: Int!
	ref: String
	createdAt: String!
	updatedAt: String!
}

리졸버は、データベースと通信し、モードの出力データ型に応じて、要求されたデータをデータベースから取得するか、変更(作成、更新、または削除)を実行する必要があります.
例を見てみましょう.

export const getFood = async (_, { getFoodInput: { foodID: _id } }) => {
  try {
    const foodList = await Trip.find({ _id })
    if (!(foodList?.length > 0)) return null
    return foodList
  } catch (err) {
    throw new Error(err)
  }
}

クライアントから受信したfoodIDを使用して、mongoDBのfoodListを検索し、データを返します.このとき、mongooseを非同期関数として利用する.
データベースに直接要求できますが、httpを使用してデータを取得したり、さまざまな方法でデータをインポートしたりできます.この左利きの拡張性は、残されたコードの移行を支援します.

サーバ-クライアントコラボレーション

Rest APIとは異なり、クライアントはAPIリストを必要とせず、モードを使用するだけでクエリー文を作成できます.
ここにはクエリー用のIDEがあり、このモードを非常に美しく整理しています.
グラウンド(apolloサーバライブラリ)

クライアントがGraphQLを使用する方法(インタラクティブ環境)

クライアントがgqlを使用することは、次のことを意味します.

クエリー

の作成

クエリーサーバに送信され、応答

が受信される.

変更されたデータ応答コンポーネントでステータス

を管理する.

クエリー文の作成

playgroundなどのツールを使用してモードを表示し、必要に応じてデータを組み合わせてクエリー文を作成します.

クエリー・サーバに送信され、応答が得られます。

Rest APIと同様に、サーバとの通信はhttpである.クエリ文はFetch関数で渡すことができますが、より直感的で抽象的なライブラリがあります.
Apolloクライアント.gqlを使用してクエリーされたデータステータス管理ライブラリ.
1つの関数は、Apollo clientのhookを使用してクライアントからサーバに要求されたデータクエリーを使用します.

const { loading, error, data } = useQuery(GET_DOGS);

この場合、クエリのデータはApollo Cacheという名前のストレージに格納されなければならず、次のクエリが発生した場合、まずApollo Cacheを参照して、不要なサーバ呼び出しを回避する.

変更されたデータ・レスポンス・コンポーネントでのステータスの管理

Apollo clientのhookはReact hookであるため、クエリの値が変化すると、再レンダリングはすぐにUIの変化を引き起こす.
reference

https://tech.kakao.com/2019/08/01/graphql-basic/

https://www.apollographql.com/docs/react