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クライアントの組み合わせは、フロ
TypeScript で GraphQL Client を便利に開発するためのツールを作っている話
Provides functions to help TypeScript GraphQL client development including auto completion, query validation, type… このツールに限らずですが、開発支援系のツールは自分で使うモチベーションがあるときに作るのが一番ということもあり、重い腰を上げてこいつに大幅にアップデートを加えました。年末年始で時間もいっぱいありましたしね。 エディタ支援機能ts-graphql-plugin という名前にもある通り、こいつはTypeScriptのLanguage Service Pluginです。 Language Service Pluginというのは、TypeScriptの言語支援サーバー（tsserver）上で動作するため、エディタの種別を問わず動作するのが特徴です。 さて、例えばReac
【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する
【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する こんにちは、ソリューションの五十嵐です。 MongoDB + GraphQLでデータを提供する案件に携わりました。 その際に使用したgraphql-composeというライブラリが素晴らしかったので記事にまとめます。 GraphQLとは GraphQLはクライアントとサーバでのデータのやりとりに使用するクエリ言語です。 欲しいデータを過不足なく取得できるほか、学習コストが小さいなどのメリットがあります。 デメリットとしてサーバサイドの実装が難しいという情報が多いですが、 graphql-composeを使用することで簡単にCRUD機能を有するGraphQL APIを実装できます。 https://graphql-compose.github.io/ 構成は以下の通りです。 Node.j
「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
Node.js学園祭で "GraphQL + Apoll により変化するアプリケーション設計" という話をしてきました
11月23日に行われた "東京Node学園祭2018" にて、React + Apollo Client (GraphQL) により変化するアプリケーション設計" というトークをしてきました。 スライド読み上げるようなプレゼンをなるべくしたくなかったこともあり、結果スライドだけではよくわからない気がします。雑にフォローアップと、何が言いたかったのか少しまとめてみました。 全体的に下記スライドを見ながら読んでいただくと分かりやすいかもしれません。 GraphQL と Apollo について まず React Apollo が何をしてくれるのか、何が嬉しくて、設計がどう変わるのかみたいなところを知るためには GraphQL の前提知識が必要です。 GraphQL に関しては公式に Introduction がありますが、実際所見でこれ見て GraphQL サーバ立ち上げるのはそれなりにダルいは
apollo-link-stateで状態管理を行う - 技術探し
www.apollographql.com 昨日、会社の同僚とreduxにapolloのキャッシュを乗せるかどうかって話をしたので、サンプルを書いてみました。 自分はreduxのアーキテクチャが大変好きですが、Apolloとは相性が悪いためと思っています。 (なんでApolloClient.reducer()がなくなったのかも考えるといいかも) また、ここでは話しませんがprop drillingを解決するための他の方法として、context apiの使用も考えることが可能です。 サンプルコード github.com react-apollo react-apolloではクエリを渡すことで自動にfetchを行い、コンポーネントをレンダリングすることが可能です。 // github/graphqlを叩き、hiroppyの情報を取得し表示する const GET_AUTHOR = gql` q
GraphQLはRESTの置き換えではない｜こんぴゅ
GraphQLは最近注目されているWeb APIのための問い合わせ言語だ。 現在主流のRESTfulなAPIはURLとmethodでリソースを表現するわけだが、GraphQLは単一エンドポイント（ex: "POST /graphql"）だけ存在し、欲しいリソースをHTTP POSTのbodyに明示的に記載してリクエストする。 ↑JSON APIをGraphQLの形式でコールする（引用: how to graphql ) 徐々に実装例が増えてきており、2016年にはGithubがAPIの実装を全面的にGraphQLに移行させたのが注目された。 色々調べていくと、GraphQLは単にRESTの代替ではなく、開発・運用フローを一新させうるほど豊かな思想・機能を含む事が分かって来たので現状の整理をしてみたい。 APIリクエストを束ねて効率化RESTではURLがひとつのリソースを表すため、複数のリソ
GraphQL at Twitter
Tom Ashworth (@tgvashworth) is a software engineer on the core services team at Twitter. Tom's going to give us a whirlwind tour of how GraphQL fits into the architecture at Twitter. We're going to cover: The Twitter GraphQL API and how it fits into Twitter's microservices architecture Subscriptions architecture Twitter's schema and plan for GraphQL in the long term API Twitter started experimenti
Rails + GraphQL で REST じゃない API を作る - まっしろけっけ
はじめに ここに書いている内容は僕が仕事で開発を行なっている minne の API に GraphQL を導入するにあたり gist に雑にまとめてメンバーに共有した内容で公開できない部分をアレしたやつです。 (minne の API は現状オープンなものではないです。 GraphQL #とは プログラミング言語ではなく、クエリ言語 GraphQL というミドルウェアでは無い 専用の server を立てるとかも必要ない 開発は FB GraphQL 標準化を目指して Draft RFC が公開されている メリット クライアントが必要とするデータを 1 回のリクエストで取得できるようになる REST に近い API だとモバイルアプリで 1 画面を表示するために複数回のリクエストを投げる必要がある どのデータが必要なのかは投げられたクエリから判断するので無駄なデータを返す必要がなくなる
GraphQLは何に向いているか - k0kubun's blog
今年GitHubがGraphQL APIを正式公開したあたりから、GraphQLが去年とかに比べちょっと流行り始めたように感じる。idobataがGraphQL APIを公開したり、Kibelaも公開APIをGraphQLで作ることを宣言している。 利用者側からすると使えるインターフェースの中から必要なものを調べて使うだけなのであまり考えることはないのだが、自分がAPIを提供する立場になると話は変わってくる。REST APIとGraphQL APIはどちらかがもう一方のスーパーセットという風にはなっておらず、どちらかを選択すると何かを捨てることになるので、要件に応じてどちらを選ぶのが総合的に幸せなのか考える必要がある。 以前趣味でGitHub連携のあるサービスを作っており、それを最近GraphQL API v4を使うように移行し、そこでついでにそのサービスのGraphQL APIを書いてみ
GitHub APIから学ぶ次世代のAPI実装方式GraphQL - Qiita
最近公開されたGitHubのAPIは、GraphQLという形式に対応しました。今後はこちらが主流になっていくようで、既存のREST APIからGraphQLへのマイグレーションガイドも提供されています。 今回は、このGraphQLについて、実際にGitHubのAPIを叩きながらその仕組みを解説していきたいと思います。 GraphQLとは 歴史 GraphQLは、Facebookの中で2012年ごろから使われ始めたそうです。その後2015年のReact.js Confで紹介されたところ話題となり、同年"technical preview"のステータスでオープンソースとして公開されました。その後仕様が詰められ、2016年9月に晴れて"preview"を脱し公式実装として公開されました。これと同じタイミングで、GitHubからGraphQLバージョンのAPIが公開されています。 このあたりの経緯
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apollo ServerとPrismaではじめるGraphQL API開発入門
GitHub - samdenty/gqless: a GraphQL client without queries
REST API に疲れたあなたへ贈る GraphQL 入門