GraphhQLコープの先端に向かって


概要GraphQLは、「タイプシステム」に基づいてクエリーを実行するクエリ言語である.
フェイスブックは2012年からGraphQLを使用し、15年にオープンしました.graphは、サービス端末とクライアントの通信を記述するための標準セットを定義する.grapphに記述された機能は、任意の言語を使用して実現されてもよい.ECMAScript規格のJavaScriptと同じです.
サンプル
フロントエンドの入力フィールドと構造.バックグラウンドは、フロントエンドの要求に従ってデータを返します.
一つのGraphQLは、二つの部分からなることを要求する.操作符とドキュメント.
オペレータGraphQLは、フロント・バックグラウンド・インタラクションの中間層として、クエリー機能だけではなく、RESTGETPOSTDELETEなどのタイプの要求がある.GraphQLは、フロントバックグラウンド通信を2つのクラスquerymutationに直接分ける.query名前の通り、queryはデフォルトのオペレータであり、クエリーを代表して、サービス端末に副作用を与えない要求である.オペレータがいないとデフォルトでquery です.上の図はqueryオペレータを省略しています.完全な要求は実はこのようです.
query {
    hero {
       name
    }
}
mutationmutationは一つの動作を表し、サーバーに修正をもたらす.例えば添削します.たとえば:
mutation addMessage($input: MessageType!) {
  addMessage(input: $input) {
    id
    text
  }
}
結果を返します
{
    "addMessage": {
      "label": "     message",
      "id": "0RaqSeOL0"
    }
}
($input: MessageType!)に対しては霧がかかっているかもしれません.これはただ伝参の文法を定義して、文書を通して習得できます.
subscriptionsubscription、購読オペレータはまだ標準に組み入れられていませんが、既にアプリケーションが実装されています.オペレータを購読する機能は、オペレータが操作を傍受するようなものです.VUEの中のwatchと同じです.ただwatchはサービスです.一度ビジネスの最中に私たちが購読している変化が起こったら、サービスの側から積極的に変化を私たちに送ってくれます.自分の業務コードの中でもうポーリングはやめてください.タイマーです.
文書
文書部分:
{
  hero {
    name
    height
  }
}
ドキュメントは、フロントエンドがバックグラウンドに説明するために必要なフィールドです.先端が一番すっきりしているところです.データ構造がはっきりしています.どのような要求を送りますか?どのようなデータを取りますか?
ドキュメントを観察します.ドキュメントは種類とフィールドで構成されています.GraphQLは強型言語である.typescriptを使ったら分かりやすいです.
定義された属性があると考えられます.heroは一つのタイプです.nameおよびheightはフィールドである.
特徴
  • は、複数のリソースを取得し、要求は一つだけである.
  • フロントエンド制御:クライアントが指定したクエリであり、エンドは受動からアクティブになり、何を取るべきかを決める.
  • 階層構造:操作粒度はフィールドレベルで、読み取り可能性が高く、クエリの構造と結果は非常に似ています.
  • 開発友好:強いタイプのおかげで、GraphQLはコード作成時に語句が間違っているかどうかを確認してもいいし、知能提示タイプのフィールドもあります.ドキュメントは自動的に生成され、豊かな体験ができます.
  • は、前後の通信コストを低減する.
  • RESTと比較する.
  • は、システムの発展に伴って、RESTのインターフェースの持続的な平面成長を維持するために、GraphQLは、タイプを増やすだけで、よりメンテナンスに有利である.
  • 複雑なクライアントであれば、一つのページはしばしば複数のインターフェースを呼び出す必要があり、GraphQLは一回だけ呼び出すことができ、一度にすべてのデータを要求する.
  • RESTによって動作されるリソースは相対的に離散的であり(インターフェースインターフェースインターフェース)、GraphQLのデータはより全体的である(タイプ構成のため).
  • コミュニティフレームワーク
    フロントエンドのクライアントは主にApolloRelayがあります.彼らの役割はaxiosと同じです.私たちが要求を構成するのに便利です.業務では主にvueを使っていますので、vue-apploがありますので、私が選んだのはApolloです.vue-apollostore階を持っています.データキャッシュが便利です.vuexも削除できます.
    資料vue-cliを使って簡単な添削の項目を作成しました.ドキュメントに合わせて自分でコードを打つことができます.GraphhQLデモ
    文章
  • は、あなたがGraphQLを使うのを妨げる10の問題
  • です.
  • 30分GraphQLコア概念を理解する
  • RPC vs REST vs GraphQL
  • 文書
  • graphql公式文書
  • vue-applo文書
  • applo文書
  • githubのgraphサンプルインターフェース