RailsアプリをNext.js+Rails API + GraphQL（Relay）にリプレイス（snowwshiro | スノーしろ） 2019年12月より運営している「snowwshiro|スノーしろ」は、Ruby on Railsアプリとして開発していましたが、今後の開発効率化を図る為、フロントエンドとバックエンドを分離することにしました。 そして今月(2021年12月)にリプレイスが完了しましたので、今回採用した技術スタック等についてご紹介します。 リプレイス後のサイトは以下となります。 フロントエンド Next.js フロントエンドにはNext.js（React）を使っています。 普段関わっているお仕事でNext.jsを触ることが多かったので、そこで得たものを活かせる様にしたいと考えて採用しました。 TypeScriptを使っています。 Relay 後述のGraphQLサーバー
2冊目も公開中なのでみてください！ https://zenn.dev/tatta/books/4e993c596e7dc9 TypeScriptを使いはじめて1年になるので、バックエンドのWebアプリを設計するときに気を付けていることをまとめました。（※社内勉強会用資料の公開版です。） TypeScriptについては、Next.jsを中心にフロントエンドに関する公開情報が豊富です。一方でバックエンドに関する公開情報が少ないと感じています。（かくいう私もNext.jsからTypeScriptデビューしたわけですが） TypeScript * GraphQL という構成は仕事・趣味で採用されている方も多いのではないでしょうか？ 私もその1人です。私のような方のためにも、バックエンドの設計プラクティスについてまとめようと思い筆を取りました。 本書がこれから始める読者にとっては教科書のようになり、
PWA Night 2021で発表したセッションです。 https://conf2021.pwanight.jp/speaker/hamada/ 今回は、GYAO!トップページのWEBパフォーマンスの改善をケーススタディとして、PWAに必須なパフォーマンス改善の具体例を見ていきます。大規模な構成変更と、その成果として得られたスケーラビリティ、ページの表示速度の向上についてをお話しします。
こんにちは．マンガチームの id:mangano-ito です．最近は GraphQL API の開発を担当しており，GraphQL に関することを勉強したり実践したりしています．今回は開発ツールについてのお話です． GraphiQL とは GitHub API での使用例 GraphiQL を導入してみよう ツールバーをカスタマイズしてみよう ヘッダーやクエリをカスタマイズしてみよう 実際に開発ではどう使っているか GraphiQL とは graphql/graphiql: GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools. GraphQL API の使いやすい GUI クライアントです．GUI クライアントなので GraphQL ではなく Graph i QL となっているのが
最近調べていた Apollo Federation についてのメモです。 Apollo Federation の概要と、Next.js の API Routes で Apollo Federation を使う例をまとめています。 Apollo Federationとは？ 以前 Netflix の GraphQL マイクロサービスアーキテクチャが話題になりました。その構成を支えているのが Apollo Federation です。 Apollo Federation は、複数の GraphQL マイクロサービスをゲートウェイでまとめて、1 つの GraphQL エンドポイントとして提供するものです。 Apollo Federation を使うことで、それぞれのマイクロサービス間で依存する処理を良い感じに統合してくれます。 例えば、投稿情報は Post マイクロサービスにあり、その投稿の投稿者
GraphQL Ruby 公式ページ RailsでGraphQLを扱う場合↑のgemを使ってAPIを実装していきます。 graphiql-rails 合わせて graphiql-rails gemを入れておくとブラウザ上で実装したGraphQLの 確認ができるIDEが使えるようになります :sparkles: ※ graphql-rubyのinstall時に graphiql-rails のgemをGemfileに追加してくれます イメージ画像 環境構築 $ rails generate graphql:install create app/graphql/types create app/graphql/types/.keep create app/graphql/app_schema.rb create app/graphql/types/base_object.rb create a
サーバーサイドからみたGraphQL Serverlss Meetup#19 2021/03/31 に行われた Serverlss Meetup#19 で上記のタイトルで登壇してきました。サーバーサイドの話をしようと思ったけどGraphQLの解決している話をしようと思ったらクライアントの事もかなりはいってしまったので記事のタイトルは変えました。 以下内容です。記事の最後に資料を書くにあたって参考になった資料のリンクを置いてます。 GraphQL and me この1年書いたQiita記事 GraphQLの特徴を分解する ~API インターフェース・Universal BFF・API Gateway~ GraphQLはサーバーサイド実装のベストプラクティスとなるか GraphQLの全体像とWebApp開発のこれから 今回話す事 そもそもGraphQLはなんで作られたのか、何を解決しようとして
GraphQLのAPIをNode.jsで開発する時に、スキーマ駆動開発をやってみたものの、途中でしんどくなってやめて最終的にはGraphQL Nexusに乗り換えた。 スキーマ駆動開発とは ここでいうGraphQLのスキーマ駆動開発というのは大まかに言うと、次のようなワークフローを指す。 GraphQLのスキーマを記述する GraphQLスキーマを元に、サーバ側の実装とクライアント側を実装する 実際に自分がGraphQLのAPIをNode.js+TypeScript+Apollo Serverで構築したときには、GraphQLのAPIを追加する際の具体的なワークフローとしては次のようになった。 GraphQLのスキーマを記述する graphql-code-generatorを使ってスキーマからリゾルバのTypeScript型定義を自動生成する リゾルバの型定義にしたがって、サーバ側のAPI
この記事で紹介している機能はApollo Sandboxという名称でログインなしで利用可能となりました。 複数のエンドポイントをダッシュボードで管理したい場合などはこの記事の手順でログインして利用した方が便利ですが、とりあえずクエリ発行してレスポンス見たい！という場合は上記の Apollo Sandbox を利用した方が便利そうです。 Apollo Studioで Graph 作成時に設定していたエンドポイントはサイドメニューから設定してください。 Apollo Studio? ブラウザ上から指定したエンドポイントへ向けて GraphQL クエリを発行し Response を確認できる無料のツールです(有料プランも有り)。 Apollo チームが開発しているものですが、クエリを実行して Response を見るだけなので、 ApolloServer, ApolloClient などのライブ
2019年11月に発売された「初めての GraphQL」を読んだ．1度ザッと読んだ後に，気になっていた Apollo Server と Apollo Client の実装を写経しながら理解を深めていたため，書評をまとめるのに少し遅れてしまった． タイトルに「初めての」とある通り，GraphQL 初学者をターゲットに網羅的に学ぶことができる1冊だった．特に「背景 → クエリ → スキーマ → リゾルバ → クライアント → 実戦投入」という流れは素晴らしく，一言で表現すると「知りたい！を知れる本」かなと！5章と6章は時間を取って写経するのが良いと思う． 初めてのGraphQL ―Webサービスを作って学ぶ新世代API 作者:Eve Porcello,Alex BanksオライリージャパンAmazon 目次 1章 : GraphQLへようこそ 2章 : グラフ理論 3章 : GraphQLの問
はじめに 対象読者 GraphQLについてざっくり学びたい人 公式ドキュメント読むのがしんどい人 Apollo/Relayどっちを使うか迷っている人 GraphQL概論編 RESTful API 代表的なWeb APIである、REST APIについて、簡単にまとめつつ、 GraphQLでできることについて、書いていこうと思います。 RESTful API(REST API)とは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたものです。RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに適用したものをRESTful APIと呼んでいます。 RESTful APIでは、URL/URIですべてのリソースを一意に識別し、クライアントがHTTP（あるいはHTTPS）で要求
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クライアントの組み合わせは、フロ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TL;DR GraphQLはクライアント側とサーバー側の双方の複雑化を解決するために利用されてる フロントエンドにとってGraphQLはHTTP上で動く信頼できる唯一のリソースとして振る舞う フロントエンドの状態管理のベストプラクティスとしてのApollo Client クライアントファーストなAPI, GraphQLはWeb APIのベストプラクティスになり得る クラシックアプリケーションを改修することなくGraphQLとモダンフロントエンドで今どきのアプリを作れる はじめに GraphQLは非常に良く出来たソフトウェア(の仕様)です
GraphQLとクライアントサイドの実装指針.md GraphQLとクライアントサイドの実装指針 GraphQLって何 Facebookが開発した クエリ言語 今はGraphQL Foundationに移管されている https://quramy.github.io/graph-api-note/#/ GraphQLの特徴 スキーマと静的な型 Demand Driven Architecture Composition 1. スキーマと静的な型 スキーマには可能なクエリや操作の全てが記述されている。 表現方法はいくつかあるが、SDL(Schema Definition Language)で表現されることが多い。 type User { id: ID! name: String! age: Int friends: [User] articles: [Article] } type Arti
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
