Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
GraphQL + Apollo の世界 ~Android 編~ - スタディサプリ Product Team Blog
こんにちは。Android アプリ開発者の geckour です。 今回は、Android における GraphQL と Apollo についてお話しします。 はじめに Quipper では現在新規プロジェクトに取り組んでいて、その技術スタックの議論の中で「GraphQL を使っていきたい」という意見が出ました。 ただ、同プロジェクトの Android チーム内は GraphQL に明るくないメンバーがほとんどで、その選定に乗るか乗らないかの判断が難しい状況だったため、様々な調査・検討を行いました。 本記事では、そんな「GraphQL にあまり詳しくない方」を主対象に調査・検討の成果を簡単にお伝えできればと思います。 GraphQL まずは GraphQL についてのお話です。 GraphQL を学ぶ 先述の通り弊チームは GraphQL の知見があまりなかったため、勉強会を開くことからス
NestJSでGraphQLをGuardする - Qiita
NestJSでGraphQLのQueryまたはMutationをGuardする方法を説明します。 基本的には、NestJSの公式に掲載されていますが、GraphQLをGuardするには少し工夫が必要です。 環境 NestJS 6.0 ゴール NestJSでGraphQLをGuardする方法はいくつかあります。 今回は、ユーザのロールによってGuardする方法を採用します。 以下のような感じでGaurdします。@nestjs/passportのjwtでGuardした上で、ユーザのロールが2となっているもののみアクセスできるmutationを実装します(queryでも同じです) @Mutation(returns => SaveSiteConfigResult) @UseGuards(JwtAuthGuard) @Roles(2) savesiteconfig(@Args('savesitec
GraphQL/REST における認証/認可 - tasuwo-graphql
GraphQL/REST における Authorization, Authentication について。 https://www.prisma.io/tutorials/graphql-rest-authentication-authorization-basics-ct20/ REST API Authentication (認証) Authentication には JWT を利用する。JWT を生成するコードは、以下のようになる。読み込み権限を与えることを示す "read-post" を claim として保持させ、暗号化には HS256 を利用し、この暗号化時のシークレットキーとして "secret" という文字列を利用する。 code:js import * as jwt from "jsonwebtoken"; const token = jwt.sign({ claims:
Real World GraphQL on Next.js SSR
tl;drNext.jsはv9.3.0以降Initial Loadingの扱いが変わったクライアント側ではApolloを利用することができるが、Authorization Headerを設定するなら一工夫必要SSR時にはfetchによるシンプルなAPIリクエストをすると良い昨今のWebフロントエンド昨今のWeb開発において、React、TypeScriptとかのベース知識は当然として、やはりNext.js(あるいはNuxt.js)のような、SPA/SSR両方のニーズを汲み取りながら、dynamic routingを提供してくれたり、ビルド環境を高速に整備してくれるフレームワークが重宝されるようになってきていると感じます。 また、Reduxもアリですが、スキーマ駆動開発が推進できるGraphQL、特に尋常じゃなくステート管理が用意になるHooksとApolloクライアントの組み合わせは、フロ
prisma - 最速 GraphQL Server実装
react-apollo の調査で GraphQL サーバーをさっくり実装する必要があり、 今 graphqool どうなってるんだっけ、と見に行ったら prisma が推奨されていました。 日本語情報がまったくなかったので、調査した結果をまとめておきます。 prisma とはなにか GraphQL の形をした ORM MySQL/Postgre への マイグレーションヘルパー付き モデル定義からインデックス自動生成 CRUD自動生成 graphqoolの次期版? PaaS に依存せず、自分でデプロイ可能なマイクロサービス 自分も最初よくわからなかったのですが、 使ってみた感じでは、 GraphQL の形をとった ORM + Migration Helper です。
「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
scalar型を新しく定義するためにはscalarキーワードを使います。例えば、Date型を新しく定義するには次のようにします。 scalar Date スキーマではこれだけですが、実際に使う際はGraphQL処理系に対してさらにシリアライズとデシリアライズを定義することになります。 GraphQL組み込みのscalar型は先にあげたものだけなので、例えばバイナリ、日付と時刻、HTML/XML、BigIntなどを必要に応じて追加することになるでしょう。ただしその場合、サーバーサイドとクライアントサイドでシリアライズ・デシリアライズの実装を一致させる必要があります。 Enum enum（イナム）はscalar型の一種で、特定の値のみを持つ型です。例えば、組み込みscalar型であるBooleanをenumで宣言すると次のようになるでしょう。 enum Boolean { true false
GraphQLにおけるエラーハンドリングの仕方 - ZOZO TECH BLOG
こんにちは、サーバーサイドエンジニアの竹若です。今回GraphQLにおけるエラーハンドリングを調査、Ruby on Railsとgraphql-rubyを使って実装する機会があったので、そこで得られた知見を共有させていただきたいと思います。(なお今回の実装はプロダクション環境には出ていません) GraphQLの仕様とプラクティス それではまず初めに、GraphQLが仕様に定めているレスポンスの返し方を見ていきましょう。 レスポンスのフォーマットに関するプラクティス GraphQLのプラクティスの1つに、レスポンスのhttp statusを200で統一し、レスポンスのerrorsキーにエラーの詳細な情報を持たせるというものがあります。 なぜならGraphQLではリクエストに複数のクエリを含めることができるからです。 https://www.graph.cool/docs/faq/api-ee
GraphQLをNode.jsとexpressでためしてみる | DevelopersIO
GraphQLをNodeJSとExpressで試してみました。10分くらいでできますので、実際に動かして雰囲気をつかんでみたいって方にオススメします。 はじめに 最近GraphQLに興味が湧いています。ちょっと試してみたくなったので、チュートリアルをやってみました。思いのほか簡単に試せたので紹介したいと思います。10分くらいでできますので、ぜひやってみてください。 参照したのはこちらのチュートリアルです。 Creating A GraphQL Server With Node.js And Express GraphQLとは GraphQLは、一言で言えば「必要なデータを過不足なく、一度に取りだす」ことのできるクエリ言語です。 http://graphql.org/ GitHubをはじめ多くのサービスでサポートが表明されています。流行っているようでいて、でもそれほどでもないような。しかし微
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphQLサーバを作る苦しみと解決手法