個人的に集めているものです。
使いこなせていないのが残念なところｗｗｗ
オススメのツールがあったら教えてください。
- Apollo
- Relay
- Prisma
- GraphQLエディタ
- GraphQLプレイグラウンド
- Altair
- GraphQL Voyager
- urql
- AWS Amplifyクライアント
- 11. Graphql-hooks
- bitであったコンポーネント
- 感想
Apollo
Apolloクライアント
データの取得、キャッシュ、ロードとエラーの状態の追跡、そしてUIの更新のためのすべてのロジックがコンポーネントにカプセル化されています。
公式より便利なのが驚きのところです。
Apolloサーバー
Express、Koa、Hapi、LambdaなどのNode.jsのほとんどすべてのHTTPサーバーフレームワークで動作します。
キャッシュ、モック作成の補助、エラー処理、重複排除、GraphQLプレイグラウンド、認証などの機能があります。
Apolloツール
GraphQLスキーマを構築、モック、およびステッチする
リゾルバー、インターフェース、共用体、およびカスタムスカラーを完全にサポートしたスキーマを生成します。生成されたスキーマはGraphQL.jsと完全に互換性がありま
Relay
Relayは、GraphQLを使用するアプリケーションのための
高性能でスケーラブルなインフラストラクチャとして機能するようにFacebookによって構築されたJavaScriptフレームワーク。
自分の認識だとreact専用のイメージ・・・。
Prisma
Prismaは、使用可能な既製のCRUD操作、
パフォーマンスの高いクエリ解決エンジン、Apollo（クライアントとサーバー）の互換性、タイプセーフなリゾルバなどを備えた、弾力的で量産対応のGraphQLサーバーを簡単に実装できる
ORM、移行、管理UI（Postgres、MySQL、MongoDB）簡単に言えば、Prismaは従来のORMを置き換え、データベースのワークフローを簡素化できます
// Retrieve all users
const allUsers = await prisma.users()
// Retrieve a single user by email
const bob = await prisma
.users({ email: "bob@prisma.io" })
// Retrieve all comments of a post in a single request
const commentsOfPost = await prisma
.post({ id: "cjl4srkaqqxa30b46pqcyzpyo" })
.comments()
// Send a raw GraphQL query
const graphQLResult = await prisma.$graphql(`
query {
posts {
title
author { name }
}
}
`)
// Use GraphQL fragments for field selection
const posts = await prisma
.posts()
.$fragment(`
fragment PostWithAuthorsAndComments on Post {
title
author { name }
comments { text }
}
`)
GraphQLエディタ
GraphQLスキーマを理解しやすくするための視覚的なNodeエディタです。
ビジュアルブロックを結合することによってスキーマを作成することができます
npm i graphql-editor
でインストールできる
GraphQLプレイグラウンド
ドキュメントやコラボレーションの管理などできるGraphQL IDE。
デスクトップアプリやWeb版がある。
自動補完とエラーの強調表示ができる
インタラクティブな複数列のドキュメント
リアルタイムのGraphQLサブスクリプション、複数のプロジェクトとエンドポイントによる設定サポート、さらにはApollo Tracingサポートなどの機能を提供します。
GraphiQLと比較して、GraphQLプレイグラウンドは以下が違います
Altair
GraphQLのためのgraphQLサーバーへのgraphQLクエリを作成するためのgraphQLクライアント
ヘッダにリクエストの作成に使用されたHTTPヘッダを追加、編集、削除することができます。
許可されたアクセスを必要とする要求を行うときに認証トークンのヘッダなどを追加する必要がある場合、これは特に便利です。
GraphQL変数を追加することができます。変数を使用すると、クエリで動的な値を簡単に使用できます。
各リクエストに対して表示されたレスポンス統計情報の表示にクエリにかかる時間を簡単に知ることができます。
ドキュメント検索、構文の強調表示、強調表示エラー、クエリ内のエラーも強調表示
いつも通り、expressにインストールできる。
GraphQL Voyager
GraphQL Voyagerは、任意のGraphQL APIをインタラクティブなビジュアルグラフとして表します
urql
urqlは「リアクトのための高度なカスタマイズと汎用性のGraphQLクライアント」
例
import { useQuery } from 'urql';
const YourComponent = () => {
const [result] = useQuery({
query: `{ todos { id } }`,
});
const { fetching, data } = result;
return fetching ? <Loading /> : <List data={data.todos} />;
};
AWS Amplifyクライアント
AWS Amplifyは、さまざまなカテゴリのクラウド運用にわたって宣言的で使いやすい
インターフェースを提供します。
AWS Amplifyは、JavaScriptベースのフロントエンドワークフローやモバイル開発者向けのReact Nativeに適しています。
AWS以外クラウドでも使う事ができます
GraphQLとしてのツールもあるので一応・・記載
例 エンドポイントURLの設定
// configure a custom GraphQL endpoint
Amplify.configure({
API: {
graphql_endpoint: 'https://www.example.com/my-graphql-endpoint'
}
});
// Or configure an AWS AppSync endpoint.
let myAppConfig = {
// ...
'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
'aws_appsync_region': 'us-east-1',
'aws_appsync_authenticationType': 'API_KEY',
'aws_appsync_apiKey': 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx',
// ...
};
Amplify.configure(myAppConfig);
クエリー
import API, { graphqlOperation } from "@aws-amplify/api";
const ListEvents = `query ListEvents {
listEvents {
items {
id
where
description
}
}
}`;
const allEvents = await API.graphql(graphqlOperation(ListEvents));
11. Graphql-hooks
Graphql-hooksはReact用の最小限のフックファーストのGraphQLクライアントです。
カスタムキャッシュプラグイン、サーバーサイドレンダリングをサポートし、すばやく起動して実行するための最小限の設定が必要です。
react-hooksもGraphql-hooksも今後使えると思う
bitであったコンポーネント
先日、紹介したbitであったコンポーネント
https://bit.dev/giladshoham/github-graphql
感想
Apolloは避けて通れないかな。今の段階は最強じゃないの？
業務で使えないので勉強の速度が遅い。使えるお仕事がほしい。贅沢は言わないからreactと経由でデータ取得したい。
