Geekly Articles each Day

安心して、REST。 長寿命のGraphQL

翻訳 Samer Bunaによるオリジナル。 オリジナル記事 。

さまざまなREST APIを長期間使用してからGraphQLについて初めて学んだとき、このコンテンツのツイートに抵抗できませんでした。

Rest APIはREST-in-Peace APIに進化しました。 長寿命のGraphQL


翻訳者のメモ-安らかに眠れ、RIP-一般的な碑文「安らかに眠れ」。 最初の単語は、頭字語RESTと同じ方法で書かれています。

それからそれは笑うことを試みたが、今私はユーモラスな予後の公平さを確信している。


正しく理解してください。 GraphQLをRESTや何かを殺したことで責めるつもりはありません。 XMLが永久に存続するように、RESTは決して死にません。 しかし、正しい考えで、JSONの代わりにXMLを使用するのは誰ですか？ 私の意見では、GraphQLはJSONがXMLに対して行ったのと同じことをRESTに対して行います。


この記事は、GraphQLを支持する100％の動揺ではありません。 その柔軟性には代償が伴います。 これについては別のセクションで説明します。


私はこのアプローチのファンですので、質問WHYから始めてください。


要するに、なぜGraphQLなのか？


GraphQLが解決する3つの最も重要な問題を以下に示します。



この記事では、GraphQLがこれらの問題をどのように解決するかを詳しく説明しています。


GraphQLに慣れていない人のための簡単な説明から始めましょう。


GraphQLとは何ですか？


GraphQLは言語です。 彼にアプリケーションを教えると、彼は必要なデータを宣言的にバックエンドに報告できます。バックエンドはGraphQLも理解しています。


子どもが幼少期に言語を習得し、子どもとしてより多くの努力をすることを余儀なくされているように、GraphQLは、適切に機能するサービスに統合するよりも、新しく作成されたアプリケーションに統合する方がはるかに簡単です。


サービスがGraphQLを理解するには、クエリ処理スタック内に別のレベルを作成し、サービスとの対話が必要なクライアントのためにそのレベルへのオープンアクセスを行う必要があります。 このレベルは、GraphQLの翻訳者、またはGraphQLを理解する仲介者と見なすことができます。 GraphQLはデータストレージプラットフォームではありません。 したがって、GraphQL構文を単に理解するだけでは不十分であり、クエリをデータに変換する必要があります。


任意のプログラミング言語で記述されたGraphQLレベルには、顧客がサービスの機能について学ぶためのグラフまたは接続図に似たスキーマが含まれています 。 GraphQLに精通しているクライアントアプリケーションは、独自の機能に従って、このスキームに従ってクエリを作成できます。 このアプローチは、クライアントをサーバーから分離し、クライアントが独立して成長および拡張できるようにします。


GraphQLのクエリは、データクエリ- クエリ （読み取り操作）、または突然変異- 突然変異 （書き込み操作）のいずれかです。 どちらの場合も、クエリはGraphQLサービスが解析、実行、および特定の形式のデータへのマッピングを行う通常の文字列です。 モバイルおよびWebアプリケーションの一般的な応答形式はJSONです。


GraphQLとは何ですか？ （指の説明）


GraphQLはデータ交換を超えるものではありません。 対話する必要があるクライアントとサーバーがあります。 クライアントは、必要なデータをサーバーに通知する必要があり、サーバーは関連データを使用してこのニーズを解決する必要があります。 GraphQLは相互作用の最中です。


画像


Pluralsightチュートリアル-GraphQLを使用したスケーラブルなAPIの構築のスクリーンショット


クライアントがサーバーと直接通信できない理由を尋ねるかもしれません。 もちろんできます。


クライアントとサーバー間でGraphQLレイヤーを使用する理由はいくつかあります。 おそらく最も一般的な理由は有効性です。 通常、クライアントはサーバー上の多くのリソースを受け取りますが、サーバーは一度に1つのリソースを提供します。 したがって、クライアントは、必要なすべてのデータを取得するためにサーバーに繰り返し接続する必要があります。


GraphQLは、複数のクエリの複雑さをサーバーの肩にシフトします。GraphQLレベルでこれを実行できます。 クライアントは、GraphQLレベルに単一の要求を送信し、クライアントが必要とするすべてを含む単一の応答を受信します。


GraphQLには他にも多くの利点があります。 たとえば、複数のサービスと対話する場合の重要な利点。 多くのクライアントが多くのサービスからデータを要求する場合、中央のGraphQLレイヤーはデータ交換を簡素化し、標準化します。


画像


Pluralsightチュートリアル-GraphQLを使用したスケーラブルなAPIの構築のスクリーンショット


（前のスライドの）2つのサービスに直接アクセスする代わりに、クライアントはGraphQLレベルと対話し、すでにサービスからデータを受信します。 したがって、GraphQLは、クライアントがさまざまなAPIをサポートする必要をなくし、単一のクライアントリクエストを、理解している言語の複数のデータプロバイダーのリクエストに変換します。


3人が3つの異なる言語を話し、それぞれに情報があることを想像してください。 すべての人々の知識を組み合わせることを必要とする質問をする必要がある場合、3つの言語すべてを話す通訳者の助けがあれば、答えは非常に簡単になります。 これがGraphQLの機能です。


しかし、コンピューターはまだarbitrary意的な質問に個別に答えるほどスマートではなく、アルゴリズムはどこかに存在している必要があります。 これが、GraphQLレベルで、顧客が使用できるスキーマを定義する必要がある理由です。


コアのスキーマは、クライアントがGraphQLレベルで解決できるすべての質問をリストした機能ドキュメントです。 このスキームは、ノードのグラフについて話しているため、非常に柔軟に使用できます。 本質的に、スキーマはGraphQLレベルで要求できるものを制限します。


はっきりしない？ REST APIの代替としてGraphQLを見てみましょう。 あなたがおそらく今尋ねている質問に答えさせてください。


REST APIの何が問題になっていますか？


REST APIの大きな問題は、宛先ポイント（エンドポイント）の多様性です。 これにより、顧客は必要なデータを取得するために多くの要求を行う必要があります。


REST APIは宛先の集合であり、各宛先はリソースに対応しています。 クライアントが異なるリソースを必要とする場合、必要なすべてのデータを収集するためにいくつかの要求を行う必要があります。


REST APIは、クライアントにクエリ言語を提供しません。 クライアントは、サーバーが返すデータには影響しません。 クライアントがこれを示すことができる言語はまったくありません。 より正確には、クライアントがサーバーに影響を与えるために利用できる手段は非常に限られています。


たとえば、READ操作の宛先では、次の2つのいずれかを実行できます。



, , . REST-, , . GraphQL (over-fetching) , . .


REST API – . . API .


GraphQL . , REST API, , REST API . , - API HTTP. API , REST, , . GraphQL .


GraphQL?


GraphQL , , , :



GraphQL.


. .


, GraphQL . , GraphQL , .


– , . . .


. , , , . .


GraphQL . . , , , , . API , . API .


, , API . API . , - . .


? GraphQL REST ?


RESTful API GraphQL API — 


, « » .


, , – - . , . , , , .


, : Person, Planet Film. , . Person Film.


:


{
  "data": {
    "person": {
      "name": "Darth Vader",
      "birthYear": "41.9BBY",
      "planet": {
        "name": "Tatooine"
      },
      "films": [
        { "title": "A New Hope" },
        { "title": "The Empire Strikes Back" },
        { "title": "Return of the Jedi" },
        { "title": "Revenge of the Sith" }
      ]
    }
  }
}

. React :


// The Container Component:
<PersonProfile person={data.person} ></PersonProfile>

// The PersonProfile Component:
Name: {person.name}
Birth Year: {person.birthYear}
Planet: {person.planet.name}
Films: {person.films.map(film => film.title)}

, , , , UI . UI JSON.


, RESTful API.


ID. , RESTful API :


GET - /people/{id}

, . RESTful API ID ID .


JSON :


{
  "name": "Darth Vader",
  "birthYear": "41.9BBY",
  "planetId": 1
  "filmIds": [1, 2, 3, 6],
  *** other information we do not need ***
}

:


GET - /planets/1

:


GET - /films/1
GET - /films/2
GET - /films/3
GET - /films/6

.


, . , , .


, . RESTful API http://swapi.co/. . , . . , , .


, RESTful API . , . , API , :


GET - /people/{id}/films

RESTful API , - . RESTful API – , . .


GraphQL. GraphQL , . , . HTTP, HTTP- . , GraphQL, /graphql HTTP.


, . GraphQL:


GET or POST - /graphql?query={...}

GraphQL – , . .


-, : , , . GraphQL :


{
  person(ID: ...) {
    name,
    birthYear,
    planet {
      name
    },
    films {
      title
    }
  }
}

, GraphQL. , . GraphQL JSON, . JSON, . , .


:


    – .

, :


()    ?

GraphQL. JSON, «» (), GraphQL, JSON.


GraphQL c React UI, . , GraphQL, UI, UI .


GraphQL. , , . GraphQL – , UI.


, . GraphQL , UI, «», . , , API. .


GraphQL API . . , API ( ):


{
  person(personID: 4) {
    name,
    birthYear,
    homeworld {
      name
    },
    filmConnection {
      films {
        title
      }
    }
  }
}

. , .


GraphQL


– . GraphQL .


, GraphQL, ( Denial of Service). GraphQL , . ( –> –> … ) , . GraphQL, GraphQL .


. , . . , GraphQL , , GraphQL.


GraphQL API ( ), . , . , Facebook .


GraphQL – . – , GraphQL?


, , GraphQL DSL (domain specific language – ) . , ( ).


. GraphQL . . GraphQL, GraphQL , . RESTful API.


GraphQL . RESTful API , . . .


GraphQL . . , .


. Graph Query Graph Cache. , GraphQL: , – , .


. , . , . . . Relay.js « ».


, GraphQL – N+1 SQL-. GraphQL , . , SQL- .


RESTful API , N+1, SQL-. GraphQL, , . , Facebook – DataLoader.


, DataLoader , GraphQL. DataLoader . , SQL- .


DataLoader . , DataLoader . .


...


. - Pluralsight  Lynda. – Advanced React.js, Advanced Node.js  Learning Full-stack JavaScript.


- - JavaScript, Node.js, React.js GraphQL . , (.). , ( ) #questions.


Samer Buna



Source: https://habr.com/ru/post/J334182/

More articles:


All Articles