1653694020
GraphiQLを使用したGraphQLスキーマの視覚化
より良い、より単純な代替手段がある場合、複雑な方法を使用する必要がありますか？最も基本的なことを行うときに、なぜ常にコマンドラインインターフェイスに固執するのですか？
はい、内部で物事がどのように機能するかを理解することには利点がある傾向がありますが、常にそうとは限りません。あなたは物事を過度に複雑にする必要はありません、そしてその上、オタクでさえ最近グラフィカルユーザーインターフェースを使うことを好む傾向があります。
このチュートリアルでは、GraphiQLを使用してGraphQL開発を支援する方法を見ていきます。さっそく飛び込もう！
GraphQLとは何ですか？
GraphiQLについて説明する前に、GraphiQLが何に役立つかについて説明しましょう—GraphQL。
GraphQLは、アプリケーションプログラミングインターフェイス（API）用のオープンソースのデータクエリおよび操作言語であり、既存のデータでクエリを実行するためのランタイムです。
GraphQLは、2015年に一般公開される前に、2012年にFacebookによって社内で開発されました。
開発者は、APIと対話するREpresentational State Transfer（REST）アプローチよりもそれを好む傾向がありますが、RESTfulアプローチとGraphQLの長所と短所についてこの記事を作成しないように注意します。論文。
GraphiQLとは何ですか？
これで、RESTful APIに精通している場合は、PostmanやInsomniaなどのツールをご存知でしょう。これらのツールは、物事をすばやく視覚化するという点でAPI開発に役立つだけでなく、物事をより速く実行するのにも役立ちます。
さて、GraphiQLをPostmanまたはInsomniaと考えてほしい。GraphiQLは、GraphQL統合開発環境（IDE）です。
これは強力なツールです。GraphQLクエリを視覚的に構造化するのに役立つツール。
前提条件
先に進む前に、このトピックをよりよく理解するために必要な知識に注意することが重要です。
- Node.jsの基本的な理解。これにはノードパッケージマネージャー（npm）が付属しています
- 基本的なExpressサーバーのセットアップの理解。このチュートリアルでは、express.jsを使用してサーバーを起動します
- コードエディタ（私はVisual Studio Codeを使用しています）
プロジェクトの設定
Node.jsアプリケーションであるexpress.jsサーバーを構築しています—プロジェクトファイルを格納するフォルダーを作成します。
新しく作成したフォルダーまたは目的のフォルダーに移動したら、コマンドラインインターフェイス（CLI）で次のコマンドを実行します。
npm init -y
これにより、現在のフォルダーにpackage.jsonファイルが作成されます。
次に行うことは、プロジェクトに必要なパッケージをインストールすることです。そのためには、次を実行しますnpm install graphql express-graphql express。
package.jsonファイル"dev": "node app.js"のスクリプトオブジェクトに追加する必要があります。
それらがすべてインストールされると、package.jsonファイルは次のようになります。
次に、次のパッケージの機能について説明します。
これが私graphqlたちが構築しているものであり、このパッケージ自体が必要なすべてのメソッドを提供するため、必要です。ただし、express.jsサーバー上で実行する必要があり、箱から出して、express.jsと通信する方法がわかりませんgraphql。
このため、別のパッケージが必要です。express-graphql。
これらのパッケージをインストールする と、必要なすべてのファイルと依存関係が保存されているnode_modulesフォルダーが作成されることに注意してください。パッケージが必要なときはいつでも、このフォルダーを調べます。
フォルダに「app.js」というファイルを作成し、次のコードを貼り付けます。
//js
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema/schema');
const app = express();
// bind express with graphql
app.use('/graphql', graphqlHTTP({
schema,
graphiql: true
}));
app.listen(2020, () => {
console.log('now listening at port 2020');
});これが私たちのエントリポイントです。2行目でexpressは、変数を要求して入力しました。エクスプレス。3行目では、express-graphql;に対して同様のことを行いました。唯一の違いは、特定のメソッドを取得するためにdestructuringを使用したことです。graphqlHTTPこれは、のプロパティですexpress-graphql。
4行目では、カスタムパスschema.jsが必要でした。これはまもなく作成されます。
次に、5行目でexpress関数をインスタンス化し、変数に入れています。アプリ。
7行目から10行目までは、app.use（）を呼び出すことから始めました。これにより、express.jsにミドルウェアを登録できます。ルート/graphqlに到達するたびに、オブジェクトを（GraphiQLとスキーマ）に追加するgraphqlHTTP（）を常に呼び出すようにします。
このチュートリアルの要点であるため、GraphiQLに「true」の値を指定しました。グラフィカルに（視覚的に
）何が起こっているかを確認できるようにする必要があります。
次に、11行目から13行目まで、前のコードですべてがうまくいけば、ポート2020でリッスンし、コンソールログ「ポート2020でリッスンしています」を記録します。
次に、プロジェクトのフォルダーにフォルダーを作成します。フォルダschemaを呼び出し、作成したばかりのフォルダ（schema）内に、「schema.js」というファイルを作成します。このプロジェクトで使用することを決定したフォルダー名とファイル名は、個人的な選択にすぎないことを知っておく必要があります。これらに限定されるものではありません。
次のコードをschema.jsファイルに貼り付けます。
//js
const graphql = require("graphql");
const _ = require("lodash");
const { countries } = require("./country");
const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLID } = graphql;
const CountryType = new GraphQLObjectType({
name: "Country",
fields: () => ({
id: { type: GraphQLID },
name: { type: GraphQLString },
capital: { type: GraphQLString },
}),
});
const RootQuery = new GraphQLObjectType({
name: "RootQueryType",
fields: {
country: {
type: CountryType,
args: { id: { type: GraphQLID } },
resolve(parent, args) {
return _.find(countries, { id: args.id });
},
},
},
});
module.exports = new GraphQLSchema({
query: RootQuery,
});ここで使用した、以前にインストールされていないパッケージの1つはLoadashなので、先に進んで実行しますnpm intsall loadash。
スキーマフォルダーに、country.jsという別のファイルを作成し、次のコードを貼り付けます。
var countries = [
{ name: 'Portugal', capital: 'Libson', id: '1' },
{ name: 'Canada', capital: 'Ontario', id: '2' },
{ name: 'Nigeria', capital: 'Abuja', id: '3' },
];
module.exports = {countries};最後に、プロジェクトのフォルダは次のようになります。
ここで、 schema/schema.jsで何が起こっているかに戻ります。2行目から5行目まで、ここで、 schema / country.jsにある構造に準拠したGraphQLサーバーを正常に作成するために必要なすべてのものをインポートしてインポートします。
6行目から13行目まで、変数CountryTypeは、から取得されたGraphQLObjectType（）メソッドによってインスタンス化されますgraphql。その中には、 nameとfieldsの2つのプロパティがあります。
nameの値は「Country」です。プロパティとしてのfieldsは、オブジェクト（id; name Capital）を暗黙的に返すメソッドでもあります。
14行目から25行目まで、変数RootQueryに配置されたGraphQLObjectType（）の新しいインスタンスがあります。Loadashを使用して国をIDで返すことがわかります。
すべてが正しく行われていれば、GraphiQLインターフェースでGraphQLを実行できるはずです。
実行npm run dev：
次に、ブラウザでhttp：// localhost：2020/graphqlにアクセスすると次のように表示されます。
はい、GraphiQLインターフェースを使用してAPIをテストできるようになりました。これをブラウザに貼り付けることで、country.jsにある1つのIDで国の名前と首都を取得することができます。
{
country(id: 1) {
name
capital
}
}その後、「再生」アイコンを押すと、画面の反対側に次のような応答が表示されます。
このプロジェクトは、このgithubリポジトリにあります。
結論
GraghQLのデフォルトのビジュアライザーであるGraphiQLを使用してGraphQLスキーマを視覚化する方法に関するこのチュートリアルは終了しました。
まず、新しいプロジェクトを設定して必要なパッケージをインストールし、次に各パッケージの有用性を調査しました。
GraphQLは、APIで特定のものをクエリし、それでも可能な限り少ないリソースを最小化する優れた方法を提供することを確認しました。つまり、はるかに大きなリソースから特定のリソースをターゲットにすることができます。
ソース：https ：//blog.logrocket.com/visualizing-graphql-schema-with-graphiql/
What is GEEK
Buddha Community
1653694020
GraphiQLを使用したGraphQLスキーマの視覚化
より良い、より単純な代替手段がある場合、複雑な方法を使用する必要がありますか？最も基本的なことを行うときに、なぜ常にコマンドラインインターフェイスに固執するのですか？
はい、内部で物事がどのように機能するかを理解することには利点がある傾向がありますが、常にそうとは限りません。あなたは物事を過度に複雑にする必要はありません、そしてその上、オタクでさえ最近グラフィカルユーザーインターフェースを使うことを好む傾向があります。
このチュートリアルでは、GraphiQLを使用してGraphQL開発を支援する方法を見ていきます。さっそく飛び込もう！
GraphQLとは何ですか？
GraphiQLについて説明する前に、GraphiQLが何に役立つかについて説明しましょう—GraphQL。
GraphQLは、アプリケーションプログラミングインターフェイス（API）用のオープンソースのデータクエリおよび操作言語であり、既存のデータでクエリを実行するためのランタイムです。
GraphQLは、2015年に一般公開される前に、2012年にFacebookによって社内で開発されました。
開発者は、APIと対話するREpresentational State Transfer（REST）アプローチよりもそれを好む傾向がありますが、RESTfulアプローチとGraphQLの長所と短所についてこの記事を作成しないように注意します。論文。
GraphiQLとは何ですか？
これで、RESTful APIに精通している場合は、PostmanやInsomniaなどのツールをご存知でしょう。これらのツールは、物事をすばやく視覚化するという点でAPI開発に役立つだけでなく、物事をより速く実行するのにも役立ちます。
さて、GraphiQLをPostmanまたはInsomniaと考えてほしい。GraphiQLは、GraphQL統合開発環境（IDE）です。
これは強力なツールです。GraphQLクエリを視覚的に構造化するのに役立つツール。
前提条件
先に進む前に、このトピックをよりよく理解するために必要な知識に注意することが重要です。
- Node.jsの基本的な理解。これにはノードパッケージマネージャー（npm）が付属しています
- 基本的なExpressサーバーのセットアップの理解。このチュートリアルでは、express.jsを使用してサーバーを起動します
- コードエディタ（私はVisual Studio Codeを使用しています）
プロジェクトの設定
Node.jsアプリケーションであるexpress.jsサーバーを構築しています—プロジェクトファイルを格納するフォルダーを作成します。
新しく作成したフォルダーまたは目的のフォルダーに移動したら、コマンドラインインターフェイス（CLI）で次のコマンドを実行します。
npm init -y
これにより、現在のフォルダーにpackage.jsonファイルが作成されます。
次に行うことは、プロジェクトに必要なパッケージをインストールすることです。そのためには、次を実行しますnpm install graphql express-graphql express。
package.jsonファイル"dev": "node app.js"のスクリプトオブジェクトに追加する必要があります。
それらがすべてインストールされると、package.jsonファイルは次のようになります。
次に、次のパッケージの機能について説明します。
これが私graphqlたちが構築しているものであり、このパッケージ自体が必要なすべてのメソッドを提供するため、必要です。ただし、express.jsサーバー上で実行する必要があり、箱から出して、express.jsと通信する方法がわかりませんgraphql。
このため、別のパッケージが必要です。express-graphql。
これらのパッケージをインストールする と、必要なすべてのファイルと依存関係が保存されているnode_modulesフォルダーが作成されることに注意してください。パッケージが必要なときはいつでも、このフォルダーを調べます。
フォルダに「app.js」というファイルを作成し、次のコードを貼り付けます。
//js
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema/schema');
const app = express();
// bind express with graphql
app.use('/graphql', graphqlHTTP({
schema,
graphiql: true
}));
app.listen(2020, () => {
console.log('now listening at port 2020');
});これが私たちのエントリポイントです。2行目でexpressは、変数を要求して入力しました。エクスプレス。3行目では、express-graphql;に対して同様のことを行いました。唯一の違いは、特定のメソッドを取得するためにdestructuringを使用したことです。graphqlHTTPこれは、のプロパティですexpress-graphql。
4行目では、カスタムパスschema.jsが必要でした。これはまもなく作成されます。
次に、5行目でexpress関数をインスタンス化し、変数に入れています。アプリ。
7行目から10行目までは、app.use（）を呼び出すことから始めました。これにより、express.jsにミドルウェアを登録できます。ルート/graphqlに到達するたびに、オブジェクトを（GraphiQLとスキーマ）に追加するgraphqlHTTP（）を常に呼び出すようにします。
このチュートリアルの要点であるため、GraphiQLに「true」の値を指定しました。グラフィカルに（視覚的に）何が起こっているかを確認できるようにする必要があります。
次に、11行目から13行目まで、前のコードですべてがうまくいけば、ポート2020でリッスンし、コンソールログ「ポート2020でリッスンしています」を記録します。
次に、プロジェクトのフォルダーにフォルダーを作成します。フォルダschemaを呼び出し、作成したばかりのフォルダ（schema）内に、「schema.js」というファイルを作成します。このプロジェクトで使用することを決定したフォルダー名とファイル名は、個人的な選択にすぎないことを知っておく必要があります。これらに限定されるものではありません。
次のコードをschema.jsファイルに貼り付けます。
//js
const graphql = require("graphql");
const _ = require("lodash");
const { countries } = require("./country");
const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLID } = graphql;
const CountryType = new GraphQLObjectType({
name: "Country",
fields: () => ({
id: { type: GraphQLID },
name: { type: GraphQLString },
capital: { type: GraphQLString },
}),
});
const RootQuery = new GraphQLObjectType({
name: "RootQueryType",
fields: {
country: {
type: CountryType,
args: { id: { type: GraphQLID } },
resolve(parent, args) {
return _.find(countries, { id: args.id });
},
},
},
});
module.exports = new GraphQLSchema({
query: RootQuery,
});ここで使用した、以前にインストールされていないパッケージの1つはLoadashなので、先に進んで実行しますnpm intsall loadash。
スキーマフォルダーに、country.jsという別のファイルを作成し、次のコードを貼り付けます。
var countries = [
{ name: 'Portugal', capital: 'Libson', id: '1' },
{ name: 'Canada', capital: 'Ontario', id: '2' },
{ name: 'Nigeria', capital: 'Abuja', id: '3' },
];
module.exports = {countries};最後に、プロジェクトのフォルダは次のようになります。
ここで、 schema/schema.jsで何が起こっているかに戻ります。2行目から5行目まで、ここで、 schema / country.jsにある構造に準拠したGraphQLサーバーを正常に作成するために必要なすべてのものをインポートしてインポートします。
6行目から13行目まで、変数CountryTypeは、から取得されたGraphQLObjectType（）メソッドによってインスタンス化されますgraphql。その中には、 nameとfieldsの2つのプロパティがあります。
nameの値は「Country」です。プロパティとしてのfieldsは、オブジェクト（id; name Capital）を暗黙的に返すメソッドでもあります。
14行目から25行目まで、変数RootQueryに配置されたGraphQLObjectType（）の新しいインスタンスがあります。Loadashを使用して国をIDで返すことがわかります。
すべてが正しく行われていれば、GraphiQLインターフェースでGraphQLを実行できるはずです。
実行npm run dev：
次に、ブラウザでhttp：// localhost：2020/graphqlにアクセスすると次のように表示されます。
はい、GraphiQLインターフェースを使用してAPIをテストできるようになりました。これをブラウザに貼り付けることで、country.jsにある1つのIDで国の名前と首都を取得することができます。
{
country(id: 1) {
name
capital
}
}その後、「再生」アイコンを押すと、画面の反対側に次のような応答が表示されます。
このプロジェクトは、このgithubリポジトリにあります。
結論
GraghQLのデフォルトのビジュアライザーであるGraphiQLを使用してGraphQLスキーマを視覚化する方法に関するこのチュートリアルは終了しました。
まず、新しいプロジェクトを設定して必要なパッケージをインストールし、次に各パッケージの有用性を調査しました。
GraphQLは、APIで特定のものをクエリし、それでも可能な限り少ないリソースを最小化する優れた方法を提供することを確認しました。つまり、はるかに大きなリソースから特定のリソースをターゲットにすることができます。
ソース：https ：//blog.logrocket.com/visualizing-graphql-schema-with-graphiql/