Graphical開発者経験のための3つのものすごいツール

私が本当にGraphSQLとアポロクライアントについて好きなことは、フロントエンドエンジニアとして私を提供する開発者の経験です.この記事では、私たちはあなたの日常の仕事を簡単にいくつかの便利なツールを見てみよう!

Please note this article assumes you already have some experience with GraphQL

グラフィクスエクスプローラー

通常、私たちが新しいAPIで働き始めるとき、我々がする最初のことはAPIドキュメンテーションを読むことです.古き良きAPIの時代に、私はすべてのエンドポイントについての記述的なドキュメントを持っていれば、本当に嬉しかったですSwagger 本当の祝福だった.どのように物事は、Graphical側に起こっている?
ドキュメントをチェックしましょうRick and Morty APIs
ご覧のように、GraphSQLの部分は非常に簡単に、残りの部分と比較されます.しかし、そこに遊び場へのリンクがあります!

では、これは何ですか.基本的に、GraphSQLのクエリと突然変異を実行し、結果をチェックすることができる遊び場です.このクエリーをエクスプローラの左側に貼り付けてRun ボタン

query Characters {
  characters {
    results {
      id
      name
    }
  }
}

あなたがこの特定のGraphics終点が持っている他の質問について不思議に思うならばDocs 右側のタブ!そこでは、パラメータの問い合わせに関するすべての情報を見つけることができます.

また、別のクエリを実行しようとすると、プレイグラウンドにもリンギングと自動補完があることに気づくでしょう.

A playground shown on these screenshots is Prisma Playground. Other popular option is GraphiQL - for example, we're using it at GitLab as our GraphQL Explorer

IDEプラグインの自動補完と自動補完

すべてのベルとホイッスルで遊び場を持つことは本当に良いです、しかし、我々はまだ我々のIDE/エディタでコードを書きます.これを手伝ってくれる道具はありますか.つの一般的なIDEを見てみましょう:VSコードとwebstormは、彼らがどのようにgraphqlで働くかについて見ます.

対コード

選択のあなたのIDEがVSコードであるならば、あなたは多分Apollo GraphQL extension アポロによって.これは、多くの良さを提供します:構文強調表示、リンギング、自動補完、フラグメントへのナビゲーションなど.
プラグインをインストールした後、適切に設定する必要があります.これを行うには、apollo.config.js プロジェクトのルートでファイルします.プロジェクトはトップレベルで構成されますclient このファイルのキー

// apollo.config.js

module.exports = {
  client: { ... },
};

今、プラグインを操作するためのスキーマを提供する必要があります.RickとMorty APIの場合は、リモートスキーマを処理するので、service プロパティclient :

// apollo.config.js

module.exports = {
  client: {
    service: {
      name: 'Rick and Morty',
      url: 'https://rickandmortyapi.com/graphql',
    },
  },
};

リンギングと自動補完のためにどのように動作するか確認できます.JSファイルを作成し、クエリを書くgraphql-tag

import gql from 'graphql-tag';

const charactersQuery = gql`
  query CharactersQuery {
    characters {
      results {
        id
        name
      }
    }
  }
`;

新しいフィールドを追加すると、自動補完の仕組みがわかります.

また、存在しないフィールドを追加した場合、エラーとして強調表示されます.

同じ機能が動作します.graphql or .gql 下に置かれるファイル/src フォルダ.ファイルを外部に含めたい場合はset up your client correctly
いくつかのGraphSQLの種類を定義する場合は、プラグインが自動的にリモートの1つのローカルスキーマをステッチします-ので、ローカルクエリと突然変異が正しく検証されます!

ウェストストーム

WebStorm IDEでは、JS GraphQL ジムKyndeマイヤーによるプラグイン.インストール後は、GraphSQLスキーマへの道を定義して設定します.そのためには、プロジェクトの基本フォルダを右クリックしてNew -> GraphQL Configuration File .
これは、.graphqlconfig 次のコンテンツを使用したプロジェクトのルートファイル

// .graphqlconfig
{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://localhost:8080/graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

スキーマに名前を付けましょう"Remote Rick-n-Morty Schema" . pathName オプションはスキーマが格納されるファイルの名前を定義します.リックとmorty APIについては、エンドポイントからスキーマをダウンロードする必要があります.のためにDefault GraphQL endpoint , からリンクを変更localhost to https://rickandmortyapi.com/graphql . この節を安全に削除できるように、このエンドポイントのヘッダは必要ありません.
また、プロジェクトを開くたびにローカルのGraphSQLスキーマを更新するのもいいでしょう.これを達成するために、設定しましょうintrospect to true .
設定ファイルは次のようになります

// .graphqlconfig

{
  "name": "Remote Rick-n-Morty Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "https://rickandmortyapi.com/graphql",
        "introspect": true
      }
    }
  }
}

をクリックしてGraphQL IDEの下部にあるタブ.GraphSQLスキーマに関する情報が表示されます.しかし、これまでのスキーマは空です!

ダブルクリックDefault GraphQL Endpoint と選択Get GraphQL Schema from Endpoint (introspection) .

さて、スキーマをフェッチした後で、どのようにリンギングと自動補完のために動作するか確認できます.JSファイルを作成し、クエリを書くgraphql-tag

import gql from 'graphql-tag';

const charactersQuery = gql`
  query CharactersQuery {
    characters {
      results {
        id
        name
      }
    }
  }
`;

新しいフィールドをクエリーに追加しようとすると、プラグインが提案されます.

もし間違っているなら、エラーが強調されます.

これらの機能も.graphql ファイル.残念ながら、プラグインはファイルを認識できません.gql コードのプラグインのような拡張子が.また、VSのコードプラグインとは異なり、WebStormのいずれかのリモートの1つのローカルGraphSQLスキーマをステッチしていません.

アポロデビル

APIエンドポイント自体を扱うとき、そして、エディタでGraphSQL関連のコードを書くとき、我々の開発者経験を改善する方法について、我々はちょうど学びました.しかし、ブラウザでのGraphSQL API相互作用のデバッグについてはどうですか?
を使用する場合Apollo Client あなたのGraphSQLクライアントとして、あなたは彼らのものすごい力を活用することができますApollo DevTools ChromeまたはFirefoxブラウザの拡張.
この拡張子はどうすればよいですか?ブラウザで見てみましょう.

GraphQL タブ:これは実際には、ローカルのGraphicsの遊び場、記事の最初の部分で説明したものと同様です.SchemaやGraphqlのように、ここでスキーマドキュメントを読むことができます.

Queries : ここでは、アプリケーションがこの時点で呼び出されたすべてのクエリを見ることができます

Mutations : 前のタブと同じですが、GraphSQL突然変異

Cache : 私の意見では、この1つは最も便利です.ここでは、以前にすべての以前のクエリや突然変異の結果として、あなたは今アポロクライアントキャッシュで今何を持っているかを確認することができます.私は突然変異の複雑な更新ロジックを持っていたときに私の人生を保存し、完全に私のキャッシュに影響を与える方法について失った.

私はすべての言及ツールはあなたの人生は少し簡単にGraphSQLで作業するようになることを願って!あなたが彼らについての質問をするならば、コメントで知らせてください