The Ultimate Guide to handling JWTs on frontend clients (GraphQL) JWTs (JSON Web Token, pronounced 'jot') are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind. Although, we’ve worked on the examples with a GraphQL clients, but the concepts apply to any
概要 先日新規の Web サービス開発でフロントエンド側の技術選定を行いました。 利用する技術の中で GraphQL を提案した際に、RESTful な API で呼び出す方法と比較して納得感がないという意見があがりました。 そこで、なぜ、どういうときに GraphQL を選定すべきだと思うか、文章にして自分なりにまとめておこうと思います。 前提 構成が BFF か BE かで意見は大きく変わりません。 例えば BFF として利用されるケースでは、バックエンド側には BE チームとマイクロサービス的な API が存在しており、 BFF として GraphQL を配置するようなケースです。GraphQL のリゾルバは API を叩きます。 一方、 BE として利用されるケースとは、リゾルバが直接 DB を叩くような形です。 今回はフロントエンドのチームが管理する BFF として、JS のみで
neco_skills.md Neco プロジェクトのスキルチェックシート Neco は大量の物理サーバーを効率的に管理・運用することを目的とした開発プロジェクトです。 Kubernetes を中心に高度な自律運用の実現を目指しています。 本文書はプロジェクトに参加しているメンバーが身に着けている要素技術を並べたものです。 応募時点ですべてを身に着けている必要はまったくありません。 社内にはチュートリアル資料が多数用意されていますので、必要に応じて学べます。 リストは以下の大項目で分類されています。 ドキュメント 利用しているサービス プログラミング テスト ネットワーク Kubernetes ドキュメント Neco プロジェクトではドキュメントを非常に重視しています。 仕様書はもちろん、各種ポリシーやチュートリアル、調査資料などあらゆる場面でドキュメントを作成しています。 Markdow
The official GraphQL conference, by the GraphQL FoundationSEPTEMBER 19-21, 2023 • SAN FRANCISCO BAY AREA, CA GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve
Are you building an API? Here is the idea: If you have never heard about the REST architectural style constraints and their implication on the properties of the resulting distributed system and you do not want to (or can’t) educate yourself, use GraphQL. UPDATEI had a keynote on this topic at Nordic APIs Platform Summit 2018. In this talk, I introduce the Framework for evaluation API Paradigms b
Find new opportunities, extend your services, and scale your business with Strapi’s partner program
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
株式会社パルケの手を動かすCTO、みつるです。 今年に入ってからリリースしたプロダクトでは、TanStack Query (旧React Query）を全面的に採用しました。 無料でずっと話せるミーティングアプリ パルケミート とにかく簡単につながる無料ビジネスチャット パルケトーク このツールを使い倒した結果、これはいちライブラリの枠に収まらない、開発の考え方そのものを変える神フレームワークだと思うようになりました。 今回はその神ってるところを紹介したいと思います。 TanStack Queryとは 公式のトップページより Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte パワフルな非同期状態管理ツールという事です。 ただのデータ取得＆キャッシュの便利ツールではない、という気持ちが
メルカリ Shops での NestJS を使った GraphQL Server の実装 | メルカリエンジニアリング
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF（Backend for Frontend） レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change （破壊的変更）を防ぐ DataLoader を使って Bat
REST, Activity-oriented, JSON-RPC, gRPC, GraphQL
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ
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
JSONとBigInt
ちょっと前にblueskyで見かけた話題。もとは「GraphQLのスキーマではintが32ビットしかなくて、64ビット整数とかないのがイケてない」といった話だったかなと思う。直感的にはこれは「Javascriptではすべてが倍精度浮動小数点数だから64bit intがないから」ということになるが、よくよく調べてみるといろいろややこしい歴史的事情があるようだ。 たしかにJSにはもともとひとつのNumber型しかなく、いわゆるdouble型(倍精度浮動小数点)だけで数値を表現してきた。IEEE754の倍精度浮動小数点数は仮数部が52ビットあるので、実際には32ビット整数ていどであれば全て誤差なく表現できる。なので32ビット整数または倍精度浮動小数点数がどちらも使えるというふうに理解されてきた。 そうはいっても不便なので、現代のJSにはBigIntがある。ES2020で導入されたらしい。ただし普
いかにして GraphQL を組織に導入するか (新規開発編) / how we introduce GraphQL on scratch development
GraphQL Tokyo #18 Lightning Talks https://www.meetup.com/ja-JP/graphql-tokyo/events/286913987/ Links: [GraphQL を活用したスキーマ駆動開発の実践](https://speakerdeck.com/qsona/schema-driven-development-with-graphql) [GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL - Speaker Deck](https://speakerdeck.com/qsona/architecture-practices-with-graphql) [Quramy/gql-study-workshop](https://github.com/Quramy/g
モバイル環境でSpeaker Deckを快適に閲覧する方法 - razokulover publog
TL;DL モバイル環境からmをドメインの先頭に追加してアクセスすると良い感じにスライドが閲覧できます。 例) https://speakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis ↓ https://mspeakerdeck.com/qrush/the-graphql-way-a-new-path-for-json-apis 概要 Speaker Deckはスライドを共有するサービスです。 特に大きなカンファレンスが開催された後はたくさんの発表資料がこのサービスにアップロードされるのでよく閲覧します。 Speaker Deckは、PCで閲覧する分には特に問題はないです。 しかしモバイル環境で閲覧すると少し残念です。 なぜならSpeaker DeckにはPC用のレイアウトしか存在しないからです。 通勤中にTwitter
Relay
Built for scaleRelay is designed for high performance at any scale. Relay keeps management of data-fetching easy, whether your app has tens, hundreds, or thousands of components. And thanks to Relay’s incremental compiler, it keeps your iteration speed fast even as your app grows. Keeps iteration quickRelay is data-fetching turned declarative. Components declare their data dependencies, without wo
Discover how we're implementing AI to optimize content creation
Go + TypeScriptによるGraphQLスキーマ駆動開発 - 一休.com Developers Blog
こんにちは。宿泊事業本部の宇都宮です。この記事では、GraphQLをベースに、GoとTypeScriptでスキーマを共有しながら開発を進める方法について紹介します。 この記事は 一休.com Advent Calendar 2019 の16日目の記事です。 GraphQLとは ライブラリの選定 コードファースト vs スキーマファースト Goによるサーバ実装 TypeScriptによるクライアント実装 おわりに 参考文献 GraphQLとは GraphQLは、Facebookによって開発された、Web APIのための クエリ言語 です。その特徴もSQLに似ていて、データの取得や更新を宣言的な記述によって行うことが出来ます。 仕様は公開されており、リファレンス実装として graphql-js がありますが、それ以外にも様々な言語でGraphQLサーバを実装できます。 GraphQLでは以下の
GraphQL入門 - React.js & Express.js & Apollo の簡単チュートリアル - エムスリーテックブログ
M3 ではグローバル CTO の Brian が、サービスの海外展開や技術基盤の共通化などを積極的に進めています。その中のプロジェクトの１つとして、アメリカで提供している医療ニュースのリニューアルにチャレンジしています。2018 年 5 月には日本オフィス所属のイギリス人エンジニア @christophrowley と日本人のエンジニア (筆者)が 1 ヶ月ほどニューヨークに出張してリニューアルの検討をしてきました。 ( ↑ Chrisが撮影してくれた NY の写真 ) 今回の記事は、リニューアルで採用を検討している GraphQL を Apollo + JavaScript で作るチュートリアルです。 TL;DR Apollo を使って、クライアントサイド、バックエンドを作るチュートリアルを紹介 英語・海外での開発に挑戦したいエンジニアを絶賛募集中です。もし興味があればランチ行きましょう
Full stack open
You can discuss the course and related topics in our dedicated group on Discord https://study.cs.helsinki.fi/discord/join/fullstack and on Telegram: https://t.me/fullstackcourse. Please join the conversation! See here how to ask questions in a proper way Parts 0-8 and 13 of the course material is written by Matti Luukkainen. The content of part 9 is written by developers from Terveystalo. Part 10
JavaScript で クラスベースの設計より関数指向の実装を薦める理由 + GraphQL について - mizchi's blog
最初に: 「Functional Programming 最高！」という話ではないです JSは通信やストレージに保存するデータの扱いの関係で、JSONにシリアライズできることが至上命題になるケースが多いので、クラスベースの設計で自身に副作用を起こすメソッドより、イミュータブルな T => T なstatic methodとして切り離しておくと扱いやすいケースが多い— 現場の声 (@mizchi) 2016年9月6日 複雑なオブジェクトのシリアライズは簡単だけど、逆にシリアライズされたオブジェクトからビルダを構築するのが難しいので、JSONの構造体自身とは別に独立して独立したメソッドとしてビルダが切り離されている方が扱いやすい— 現場の声 (@mizchi) 2016年9月6日 一応コンストラクタ名を保存してシリアライズ/復元する方法はあって、RPGツクールMVのコードを読むとそういう感じに
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
React HooksとGraphQLで社内レガシーサービスを巻き取ってみたらものすごくはかどった話
New Network Provisioning System Leveraging Kubernetes and Cloud Native Open Source
今回伝えたいこと Hasuraの有効性を伝える 開発工数の削減効果 柔軟性の高さ セキュア 「開発工数の削減」という課題 昨今のエンジニアの不足や単価の上昇により、開発工数を十分に確保できない課題がある。どこの会社も開発工数を減らすために色々な策を講じているのではないか。 新技術の活用 慣れた技術の利用 プロセスの見直し 徹底した自動化 スコープの見直し 過剰品質をやめる などなど。今回は一番上の「新技術の活用」によって開発工数を削減できる可能性があるのではないかということを提案する。 こんなアプリを作ることになったとする 仮にあなたがこんなアプリを作ることになったとする。 シンプルなオンラインホワイトボードツールで以下のような機能があることが必要 付箋に文字を書ける 付箋を動かせる 付箋の色がユーザ固有の色になる 付箋を消せる(自分の作った付箋だけ) 付箋の位置、内容などをリアルタイムに
現在、最高にイケてるエンジニア向けブログは間違いなく Gatsby（キャッツビー）であると断言する。 Gatsby にはじめて触れた日に「こいつはマジでスゲー」となって即決で自分のブログを Gatsby に移行することにした。で、今見ていただいてるこのブログが Gatsby というわけです。 Gatsby が最高にイケてる理由は次の３つ 爆速無料フルカスタマイズもうまさに「華麗なるギャッツビー」 1 爆速 Gatsby の速さに対するこだわりがそこら中にある。 使われている主な技術 ReactGraphQLPWA非同期レンダリング静的サイトホスティングひとつひとつは速く見せるためのちょっとした工夫かもしれないが、ここまで全部まとめて実装されるとそれはもう速い速い。 普段から私は個人開発プロジェクトを React, Redux, GraphQL, Rails の組み合わせで作っていて一応は分
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
Effortlessly ship a fast and infinitely composable GraphQL API to enable flexible, secure, and reliable self-service access to any data, no matter its source.
tng23 でやったやつ
はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介します。そもそも前回のブログはこれを試すために環境を整備しなおそうとしたのがきっかけでした。なお、前回のブログはこちら。 www.keisuke69.net どこらへんが最高かっていうと全てのデータソースに対してGraphQLでアクセスできるようになるところ。これって最高じゃないですかね。ま、最終的には静的サイトとしてGenerateしてしまうわけですが。 ちなみに、なぜ、今回Gridsomeを試そうと思ったかというと、最近聞いたとあるPodcastで紹介されてたからです。それだけ。 Gridsome
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
The GitHub GraphQL API
EngineeringThe GitHub GraphQL APIGitHub announced a public API one month after the site launched. We've evolved this platform through three versions, adhering to RFC standards and embracing new design patterns to provide a clear and consistent interface. GitHub announced a public API one month after the site launched. We’ve evolved this platform through three versions, adhering to RFC standards an
GraphQLやめました2020.05.27 当初Golang + GraphQLで作っていたAPIをRails + OpenAPIで作り直しました。なぜGraphQLで始めたのか、どうして作り直すことにしたのかなどを経緯とともにまとめました。 始まり弊社では qrop という農家さん向けのサービスを鋭意開発しています。 私はAPI等のバックエンドの開発を主に担当しており、このサービスの開発を始める段階でAPIは GraphQL にしよう、という話になりました。 GraphQL | A query language for your APIこの時点でGraphQLである必要性はなく、詳しいメンバーがいたわけでもなく、新しい技術に触れておきたいよねという程度の理由でした。 せっかくだしGolangで開発しよう、インフラはGCPにしよう、という具合にその時やりたいことを詰め込んで開発はスタート
イベント「【タイミー/Voicy/令和トラベル】Backend LT〜技術選定における“見極める力”とは〜」での登壇資料 https://reiwatravel.connpass.com/event/306794/
第65回 HTML5とか勉強会 ー React最新情報 に行ってきたメモ #html5j - console.lealog();
Angularの人が受付してるReactの勉強会に着いたやで— りぃ (@leader22) May 31, 2016 ちなみに、今年のHTML5 Conferenceは9/3（土）だそうです。 React現状確認 by @koba04 The state of React.js 2016 // Speaker Deck React.js meetup #4が6月にあるかも Reactの使用例 Instagram, Netflix, Uber etc.. Twitterのモバイル版 <- 知らんかった SFC: StatelessFunctionalComponentsがコンポーネントの基本 MixinはなくなったのでHighOrderComponentのスタイルで機能を追加 新しくReact.PureComponentってのが増えるかも `shouldComponentUpdate()`
グラフモデルとSoEとGraphQL / TECH STAND #7 GraphQL 2022/03/03 に行われた stand.fmさん主催の TECH STAND #7 にて上記のタイトルで登壇しました。 今回の内容は GraphQLの採用を検討するにあたって、RESTとの違い、BFFとの違いをデータの観点から言語化したかった Hasuraが良いという意見と, Apolloやgraphql-ruby, gqlgenなどのハンドライティングなGraphQLが良いという意見の違いがどこから生まれているかの考察がしたかった データ指向アプリケーションデザイン(2017年リリース)にSoEやGraphQLへの言及がないため, 今だとこういう内容が書かれているんじゃないかという考察がしたかった をモチベーションに調査・検討しました。 発表のハイライトはこちらです。 以下発表内容です。一部発表時
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
React + GraphQL から成る Kaizen Ad のフロントエンド - Kaizen Platform 開発者ブログ
追記: 2021年6月現在はアーキテクチャが変わってきています。 次の記事に詳細を書いていますので、一読をお願いします。 Kaizen Adのフロントエンドアーキテクチャの遷移について - Kaizen Platform 開発者ブログ Kaizen Platform でフロントエンドエンジニアをしている山本です。この記事では、我々が運営するサービス「Kaizen Ad」のフロントエンド部分をご紹介します。 Kaizen Ad とは Kaizen Ad は、動画広告をサポートするマーケットプレイスです。 カスタマーがクリエイティブを依頼すると、広告クリエイティブを作成するグロースハッカーから動画広告クリエイティブが納品される仕組みです。 カスタマーにとってはクリエイティブ改善の運用を省力化できると同時に、グロースハッカーにとっても新しい働き方が創造できるソリューションとして提供しています。
記事の概要 この記事は、Meta 社 relay.dev チームの Jordan Eldredge 氏の Tweet で紹介された GraphQL 成熟度モデル (GraphQL maturity model) を個人的な見解を加えながら和訳した記事です。 jordaneldredge.com GraphQL を実装する上で、どの程度 GraphQL を使いこなせているか判断するための参考になれば幸いです。 実際の成熟度モデルの和訳 最初の Tweet 私は、GraphQLの利点がまだ十分には理解されていないと思っています。ほとんどの組織では、GraphQL の提供する価値を捉えきれていません。 そこで、私は「GraphQL成熟度モデル」をスケッチしてみました。あなたの組織はどの程度成熟して（＝使いこなせて）いますか？ もし以下に示す13の成熟度を達成していたとしたら、よりGraphQLを
AWS Startup ブログ スタートアップが AWS Amplify を使うべき3つの理由 こんにちは、スタートアップ ソリューションアーキテクトの水馬です。 今回のテーマは AWS Amplify です。 みなさん Amplify はご存知でしょうか？ Amplify は AWS を使用したスケーラブルな Web およびモバイルアプリ開発のためのフレームワークです。近年の複雑化するアプリケーションでは多くの場合、複数の AWS サービスを組み合わせてサービスを構築する必要があります。開発者はバックエンドの構築に加え、これらと連携する多くのソースコードをアプリケーションに実装する必要がりました。 Amplify を用いれば、複雑なバックエンドの構築、アプリケーションとの統合を簡略化し、開発者は本質的な機能の開発に集中することができるようになります。 今回は、スタートアップ において、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
React 時代に選ぶ GraphQL - とろろこんぶろぐ
Neco プロジェクトのスキルシート
GraphQL | A query language for your API
REST vs. GraphQL: A Critical Review – Good API
Strapi - Open source Node.js Headless CMS 🚀
RailsエンジニアのためのNext.js入門 - hokaccha memo
TanStack Queryは神フレームワーク
React Dashboard: an Ultimate Guide - Cube Blog
Web API Design // Speaker Deck
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
GraphQLとクライアントサイドの実装指針.md
Where content drives business momentum | Contentful
TypeScriptとGraphQLで実現する型安全なAPI実装
もうAPIを自分で開発するのは古い？Hasuraの強烈な有効性について紹介する - Qiita
Gatsbyは今、最高にイケてるエンジニア向けブログ。爆速、無料、フルカスタマイズでもう普通のブログには戻れない
GraphQL 導入の反省と再挑戦 / jsconf jp 2021
Instant GraphQL APIs on your data | Built-in Authz & Caching
GraphQLの話 (API for Front-end)
Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
GraphQLやめました | GiFT（ギフト）株式会社
TypeScript x GraphQLで2年開発してみて
データ指向アプリケーションデザインから見るGraphQL
GraphQL 成熟度モデル - とろろこんぶろぐ
スタートアップが AWS Amplify を使うべき3つの理由 | Amazon Web Services