ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
はじめに こんにちは、ソウゾウSoftware Engineerの@sue71です。連載：メルカリShops 開発の裏側 Vol.2の13日目を担当させていただきます。 以前メルカリメルカリShopsの技術スタックと、その選定理由でBFFの実装にGraphQLを採用していることをお伝えしました。メルカリShopsをリリースしてから約半年たった今、これまでを振り返ってGraphQLサーバーを実装する上での課題やあらかじめ考えておくと良い項目をまとめてみました。また、本記事ではメルカリShopsでGraphQLの実装としてApolloを採用しているため、Apolloの利用が前提の話もいくつか混在しています。予めご容赦ください。 GraphQLの説明や、メルカリShopsの実装方法に関しては以前こちらの記事で紹介しています。こちらも是非ご覧ください。 パフォーマンス課題 GraphQLは、アプリ
TL;DR GraphQLはクライアント側とサーバー側の双方の複雑化を解決するために利用されてる フロントエンドにとってGraphQLはHTTP上で動く信頼できる唯一のリソースとして振る舞う フロントエンドの状態管理のベストプラクティスとしてのApollo Client クライアントファーストなAPI, GraphQLはWeb APIのベストプラクティスになり得る クラシックアプリケーションを改修することなくGraphQLとモダンフロントエンドで今どきのアプリを作れる はじめに GraphQLは非常に良く出来たソフトウェア(の仕様)ですが、複数の側面を持つことからすぐに理解することが難しくまだ日本ではあまり受け入れられていない印象があります。GraphQLを端的に何と言われると "全てのフロントエンドのためのAPI BFF" なのですが、それだけで理解出来る人はなかなか居ないように思います
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
GraphQL Client Architecture Recommendation 社外版 | メルカリエンジニアリング
この記事は、Merpay Advent Calendar 2022 の15日目の記事です。 こんにちは。メルペイのvvakameです。 最近、社内向けにGraphQL Client Architecture Recommendationというドキュメントを書きました。社内のiOS/Android、そしてバックエンドのエンジニア向けにGraphQLをやるならこの辺りの条件を満たしておかないと恩恵を感じられなくなっちゃうかもよ、と伝えるためのものです。嬉しいことに、今までに100名弱の人たちがこのドキュメントを閲覧してくれたようです。 これをAdvent Calendarで公開するために、ちょっと調整したものがこの社外版です。 すでにGraphQLをやっているけどあまり便利じゃないな…なんでだろ？とか、これから導入したいんだけど何を気をつけるべきかな…と考える時の材料にしてください。 併せて、
自分が開発しているLaunchableのWebアプリがローンチされて1年半ほどになる。このWebアプリにはReduxのような状態管理ライブラリを入れないまま開発してきたのだが、今のところ困らずに開発できている。そういえば昔自分は状態管理について何か考えていたような…とブログを掘り起こしてみた。 ninjinkun.hatenablog.com このエントリは2016年にネイティブアプリを対象にして書かれているが、この後自分は2018年ごろにWebフロントエンドに軸足を移し、ネイティブアプリ開発から離れた。なのでこのエントリはWebフロントエンドエンジニアが2022年に再考した話になる。 結論としては、当時自分が管理したかった状態のほとんどは現在ApolloClientのキャッシュによって解決されている。 繰り返しになるが、自分が開発しているLaunchableのWebフロントエンドには状態
あなたのプロダクトに Apollo Client は必要ないかもしれない - 一休.com Developers Blog
Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの？ 複雑なアプリケーションには Apollo を使えばいい？ もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか？ 多くの方にとっては Apollo Client ではないかと思います。npm trends を見ても Apollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休
TypeScriptでWebサービス開発（Apollo Server/Prisma/Next.js etc...)
最近開発しているBtoB SaaSサービスの技術スタックを、RailsからNode.jsに移行した。 これにより、フロントエンドもバックエンドも全てをTypeScriptで統一することができた。 特にNode.jsのWebバックエンドの構成について、まだまだ世の中に知見が少ない気がしているので記事にしておく。 Webバックエンド - Node.js(TypeScript) Nexus/Apollo Server (Webサーバー) GraphQLサーバーとして、Apollo ServerのコードファーストなアプローチでのラッパーであるNexusを使っている。 Railsからの移行を決断できたのも、Apollo ServerとPrismaにより、外部との通信が型付きで、かつ開発体験よく書けるようになたから、というのが大きくある。 数年前の段階だと、素のexpressを使ってWebサーバーを立
GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql
React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん出た存在として常に注目を集めてきたReact。2022年3月にリリースされたバージョン18では、Suspenseの安定化やStreaming SSRのサポートなど数々の新機能を取り入れて話題になりました。本記事では、React／TypeScriptのスペシャリストとして幅広く活躍されているuhyoさんが、現時点におけるReactのベストプラクティスについて解説します。 Reactは、Meta社により開発・公開
この本では、TypeScriptで型安全にGraphQLサーバーを構築する方法をハンズオン形式で学習することができます。 Todoアプリの開発を通して、GraphQLスキーマの扱いやCLIツールの設定方法、TypeScriptのORMであるPrismaの基本的な使用方法、CI/CDパイプラインの構築によるマイグレーションの自動化などを体験します。 GraphQLサーバー実装の素振りをしておきたい方や、フロントエンドからGraphQL APIを使用したことはあるけど自分でAPIを実装したことはないようなバックエンドの開発初心者の方に向けた内容となっております。
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スキー
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クライアントの組み合わせは、フロ
こんにちは。武田（@tkdn）です。 GraphQL を API として採用したサービスを今年序盤にリリースしています。具体的な内容は今年の夏サミ 2020 の公募枠でお話させていただいたのでよろしければ資料もご参考ください。 週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方 / Developers Summit 2020 Summer C-4 - Speaker Deck今日は GraphQL や Apollo Server についての振り返りと反省を中心に供養しておきます。GraphQL 採用に迷いがある開発者、Apollo Server を採用しようとしている開発者へ向けた知見になれば幸いです。 まとめてみたら GraphQL みが思いの外少なくなりましたが、GraphQL Advent Calendar 2020 の 23 日目の記事です。 なぜ GraphQ
SRE を実践するためのプラットフォームの作り方と技術マネジメント / Building a Platform for SRE
GraphQL の Fragment でコンポーネントの見通しがよくなった話 - vivit engineering blog
vivit株式会社でフロントエンドエンジニアをしている関です。 新型コロナウイルス感染症(COVID-19)への対策として発出された緊急事態宣言の影響で、弊社も2ヶ月ほどリモートワークとなり、私も駆け足で自宅に作業環境を構築しました。買っちゃいましたL字デスク。 さて、弊社ではいくつかのプロダクトのフロントエンドに React(Next.js) + TypeScript を採用しており、バックエンドとの通信には GraphQL(Apollo) を採用しています。 今回はその中で、コンポーネント分割をする際の GraphQL Query の定義と取得したデータの受け渡しについて話をします。 ここからは GitHub GraphQL API v4 を使って説明していきます。 developer.github.com アジェンダ pages から components へのデータの受け渡し方法に
GraphQL + Apollo の世界 ~Android 編~ - スタディサプリ Product Team Blog
こんにちは。Android アプリ開発者の geckour です。 今回は、Android における GraphQL と Apollo についてお話しします。 はじめに Quipper では現在新規プロジェクトに取り組んでいて、その技術スタックの議論の中で「GraphQL を使っていきたい」という意見が出ました。 ただ、同プロジェクトの Android チーム内は GraphQL に明るくないメンバーがほとんどで、その選定に乗るか乗らないかの判断が難しい状況だったため、様々な調査・検討を行いました。 本記事では、そんな「GraphQL にあまり詳しくない方」を主対象に調査・検討の成果を簡単にお伝えできればと思います。 GraphQL まずは GraphQL についてのお話です。 GraphQL を学ぶ 先述の通り弊チームは GraphQL の知見があまりなかったため、勉強会を開くことからス
Auth0で保護されたAWS AppSync(GraphQL)をReactからApollo Clientで利用する方法をチュートリアルとしてまとめた | DevelopersIO
Create React App（CRA）を使ってアプリケーションを生成します。任意の作業用ディレクトリに移動後、下記のコマンドを実行します。 再現性を高めるために、パッケージのバージョンを固定してインストールしています。 npx create-react-app@3.4.1 --template typescript react-appsync-protected-by-auth0 cd react-appsync-protected-by-auth0 React RouterとAuth0のSPA用SDKをインストールします。 yarn add react-router-dom@5.1.2 @auth0/auth0-spa-js@1.8.1 yarn add -D @types/react-router-dom@5.1.2 Auth0をReactで利用する為のCustom Hookを作成
最近調べていた Apollo Federation についてのメモです。 Apollo Federation の概要と、Next.js の API Routes で Apollo Federation を使う例をまとめています。 Apollo Federationとは？ 以前 Netflix の GraphQL マイクロサービスアーキテクチャが話題になりました。その構成を支えているのが Apollo Federation です。 Apollo Federation は、複数の GraphQL マイクロサービスをゲートウェイでまとめて、1 つの GraphQL エンドポイントとして提供するものです。 Apollo Federation を使うことで、それぞれのマイクロサービス間で依存する処理を良い感じに統合してくれます。 例えば、投稿情報は Post マイクロサービスにあり、その投稿の投稿者
How Netflix Scales its API with GraphQL Federation (Part 1)
Netflix is known for its loosely coupled and highly scalable microservice architecture. Independent services allow for evolving at different paces and scaling independently. Yet they add complexity for use cases that span multiple services. Rather than exposing 100s of microservices to UI developers, Netflix offers a unified API aggregation layer at the edge. UI developers love the simplicity of w
Apollo Server と Apollo Client を写経しながら GraphQL を学べる「初めての GraphQL」を読んだ - kakakakakku blog
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の問
Why I Stopped Using Redux
Redux was a revolutionary technology in the React ecosystem. It enabled us to have a global store with immutable data and fixed the issue of prop-drilling in our component tree. For sharing immutable data across an application, it continues to be an excellent tool that scales really well. But why do we need a global store in the first place? Are our frontend applications really that complex or are
GraphQLのAPIをNode.jsで開発する時に、スキーマ駆動開発をやってみたものの、途中でしんどくなってやめて最終的にはGraphQL Nexusに乗り換えた。 スキーマ駆動開発とは ここでいうGraphQLのスキーマ駆動開発というのは大まかに言うと、次のようなワークフローを指す。 GraphQLのスキーマを記述する GraphQLスキーマを元に、サーバ側の実装とクライアント側を実装する 実際に自分がGraphQLのAPIをNode.js+TypeScript+Apollo Serverで構築したときには、GraphQLのAPIを追加する際の具体的なワークフローとしては次のようになった。 GraphQLのスキーマを記述する graphql-code-generatorを使ってスキーマからリゾルバのTypeScript型定義を自動生成する リゾルバの型定義にしたがって、サーバ側のAPI
This article is the first part of a course where we build a fullstack app with Next.js, GraphQL, TypeScript,Prisma and PostgreSQL. In this article, we'll create the data model and explore the different components of Prisma.
GraphQL Code Generator v3 Roadmapで推されているclient-presetを紹介する
こんにちは。皆さんはGraphQL Code Generatorを利用していますか？ 筆者は普段React/TypeScript/Apollo Client(またはurql)といったスタックでWebフロントエンドを書いており、その際にはGraphQL Code Generatorをほぼ必需品と言えるほど愛用しています。 サーバー側から提供されたスキーマやクライアント側が必要なデータを宣言したオペレーションから型やコードを生成し利用することで、ロジックに関する実装量が大きく削減でき、ミスを減らすことにもつながります。GraphQLを使う理由の1つと言っても過言ではないでしょう。 そのGraphQL Code Generatorではv3 Roadmapとして今後の方針が公開されており、client-presetという新しいプリセットが紹介されています。そこでは「GraphQL Code Gen
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
iOS GraphQL クライアントのデバッグツールを作った話 - スタディサプリ Product Team Blog
こんにちは、今年の4月から Quipper の iOS エンジニアになった @manicmaniac です。 ちょっと話題としてはニッチかもしれないのですが、今日は Apollo iOS client を利用したアプリで GraphQL のデバッグに苦労し、そしてコードを書いてそれを克服した話をします。 そもそも GraphQL とか Apollo ってなに？ GraphQL とは Web API のクエリ言語であり、またそのランタイム自体を指す言葉です1。 対して、Apollo は GraphQL のサーバー・クライアント用のライブラリで、Meteor の開発元でもある Meteor Development Group 社が開発しています。 Apollo の iOS 向けクライアントである Apollo iOS は単なる API クライアントを超えて、以下のような機能を備えています。 G
Getting Started With Apollo Client in Next.js | Apollo GraphQL Blog
March 9, 2021Getting Started With Apollo Client in Next.js (Update May 2023) We published a library that makes it easier to use Apollo Client with Next.js 13, this guide still remains valid if you’re using the pages directory. Wait, you want me to put my data where!? Figuring out how to configure Apollo Client with Next.js can be a bit confusing. This confusion stems from the fact that there are t
こんにちは。Turingの機械学習チームでエンジニアをしている塩塚です。 Turingは「We Overtake Tesla」を合言葉に、完全自動運転EVの開発・販売を目指しているスタートアップです。TuringではAIの強力さとそのさらなる成長を信じ、AIベースの自動運転システムを開発しています。 AIベースで自動運転を開発している会社はいくつかありますが、例えば米国の電気自動車メーカーTeslaはその代表的な会社の一つです。Teslaはカメラを主たるセンサーとして採用し、AIによって走行経路などを決定しています。詳しい内容は、Tesla AI Day 2021というイベントの内容を弊社のエンジニアがまとめているのでぜひ見てみてください。 一方、私たちはTeslaだけでなく、Apolloという中国企業にも大きく注目しています。 Apolloは、中国の巨大IT企業Baidu傘下の会社で、自
How Netflix Scales its API with GraphQL Federation (Part 2)
In our previous post and QConPlus talk, we discussed GraphQL Federation as a solution for distributing our GraphQL schema and implementation. In this post, we shift our attention to what is needed to run a federated GraphQL platform successfully — from our journey implementing it to lessons learned. Our Journey so FarOver the past year, we’ve implemented the core infrastructure pieces necessary fo
[GraphQL] TypeScript+VSCode+Apolloで最高のDXを手に入れよう | DevelopersIO
GraphQLを利用するWebアプリケーションの開発で、TypeScript + VSCode + Apollo のスタックで開発環境を構成すると、とても最高なDX（Developer Experience）が得られたので、紹介したいと思います。 どのくらい最高かを想像しやすくするため、従来のBADなDXの例を挙げてみますと...「APIのドキュメントに誤りがあり通信に失敗する」「APIの変更がドキュメントに反映されていなくてサーバサイドのエンジニアに問い合わせる」「APIのドキュメントを見ながらAPIリクエスト／レスポンスのオブジェクトを手作りで実装する」などなど、よくある話かと思います。従来のREST APIなどでは実装とドキュメントが分離されているので、そこを埋めるためのエンジニアの作業が必要です（そこをツールで埋めようとする試みは古くからありますが）。一方で、GraphQLは実装と
![[GraphQL] TypeScript+VSCode+Apolloで最高のDXを手に入れよう | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/d1d3d251b99b7ebe023b1a055d90d557ef5b230a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F02%2Feyecatch-apollo.png)
エンジニアリンググループの冨岡 (@jooohn) です。出張でNYにきています。NYへの出張は二度目なのですが、同僚のChris (彼はUK, JP, USと三カ国のM3を渡り歩いています！) とWashington, D.C.にいくなどして休日も満喫しています。 バーガーは野菜 Washington, D.C. にて。NYCからバスで4hほどでいける。 現在はM3 USAが運営するニュースサイトMDLinxのリニューアルプロジェクトに関わっています。そこで利用しているGraphQL (Apollo) の活用事例を紹介します。 新しいMDLinx の構成 新しいMDLinxでは上図のように、k8sクラスタ内にいくつかのサービスが存在するマイクロサービス構成になっています。各サービスではGraphQLを共通のインターフェースとして利用しており、webhook用のエンドポイントなどの特殊な場
Apollo Client と SSR の罠 その1 - パフォーマンス改善編 | Wantedly Engineer Blog
Wantedly でバックエンドエンジニアをしている @izumin5210 です。 この記事は GraphQL Advent Calendar 2020 の11日目の記事として書かれました。が、7割くらいは SSR についての議論のこり3割くらいが Apollo Client の話です。 最近、Apollo Client と SSR(Server Side Rendering) を利用した Web アプリケーションのパフォーマンス改善に取り組みました。この記事では「パフォーマンスの問題にどう立ち向かったか」および「そもそも問題を起こさない構造にするために何ができるか・何をすべきでないか」の考察をしていきます。 TL;DRパフォーマンス改善は計測・可視化からライブラリが用意してくれているフック機構を上手に使って計測していこうrenderToStringWithData では、renderT
GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜 | スペースマーケットブログ
GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜 こんにちは バックエンドエンジニアの西尾です。 スペースマーケットではバックエンド側は長らく単一のアプリケーションで構成されていましたが、去年くらいからマイクロサービスアーキテクチャーへの移行を進め始めました。 すでに本体(Main)と検索機能(Search)(※1)は分離されていますが、現在は本体から予約部分を切り出すことを行なっています。 （※１： 元の本体のバックエンドAPIのことをMainまたはv2, Mainから部屋の検索などを担う部分だけを切り出したサービスをSearchと記載しています。) 切り出すにあたり、考えなければならないことはたくさんあるのですが、今回はその中で 複数サービスに分離されているデータを合成し、クライアントに単一システムだった時と同じ
TypeScript + Apollo ClientでGraphQLのデータに型を付ける - $shibayu36->blog;
TypeScript + Apollo Clientで、useQueryなどを用いてGraphQLのクエリを発行する際に、クエリのvariablesやレスポンスのデータに型を付けたい。やり方が少々分かりづらかったのでメモを残す。 型をつけるためにやることは以下の通り。 apollo.config.jsを定義する graphql-tagでGraphQLのクエリを書く apollo client:codegenで型情報を生成する クエリを書いた場所で型をimportし、useQueryの型パラメータに指定する shibayu36/go-Intern-Diaryのレポジトリで試している。 apollo.config.jsを定義する まずApolloのコードジェネレータが適切に動作するために、apollo.config.jsを作る。Configuring Apollo projects - Apo
GraphQL におけるトランザクション処理は Mutation と呼ばれます。トランザクション処理の結果に基づいてビューも更新するのが一般的ですが、GraphQL の場合、いくつかの手法があります。それらの手法、どれを採用すべきかについては、後続の記事にて解説するとして、今回は前提知識となる キャッシュ機構のふるまいと利用方法について書きます。なお、この記事は React Apollo(v2)の仕様に基づいています。 Apollo のキャッシュ機構 キャッシュの仕組み、データの正規化 キャッシュへのアクセス Apollo のキャッシュ機構 Apollo ではキャッシュ機構として InMemoryCache が提供されています。Apollo client に組み込むことで、redux の Store のようにキャッシュを管理することができます。 import { InMemoryCache
Announcing the Release of Apollo Client 3.0 | Apollo GraphQL Blog
July 14, 2020Announcing the Release of Apollo Client 3.0 Today we’re thrilled to announce the official release of Apollo Client 3.0! This release is the culmination of 55 betas, 14 release candidates, and hundreds of resolved issues and merged pull requests over the past eleven months. Phew! To everyone who’s tried out AC3 during this extended beta period, thank you. We couldn’t have reached this
この記事は JX 通信社アドベントカレンダー、GraphQL アドベントカレンダーの4日目です こんにちは、JX通信社の小笠原(@yamitzky)です。普段はエンジニア部門の統括をしています。 弊社の NewsDigest ではアプリ向けのバックグラウンド API として GraphQL を使っています(サーバーは gqlgen、アプリはライブラリなし)。 tech.jxpress.net GraphQL の技術スタックとしては Apollo というライブラリが有名だと思うのですが、弊社では使ったことがありませんでした。そこで、今年の 9 月に箱根で開催した開発合宿にて、Apollo Client(React) と Apollo Server の検証を行いました。 Apollo Client を使うときに唯一鬼門だったのが、Apollo の持っているキャッシュ機構です。本日は、Apoll
React Apollo MockProvider の知見をまとめた - tomoima525's blog
MockProviderはReact Apolloクライアントのリクエストや結果をモックするのに推奨されている方法です。サンプルコードを見る限りではいい感じに動くように見えますが、実際に使うとなると、結構ハマりどころがあります。MockProviderの使い方のヒントについてはすでにmediumなどに素晴らしい記事がありますが、それでもMockProvierの予期せぬ動作に数時間を溶かしてしまいました。 そんなわけでこの記事では、レスポンスを適切にモックするまでに得られた知見をシェアします。 なおテスト環境は以下です: @apollo/client: 3.2.0 react-native:0.62.2 jest: 24.9.0 react-native-testing-library: 2.1.1 それでは行ってみましょう! 1. useQueryはhooks packageから直接インポ
Apollo Router: our GraphQL Federation runtime in Rust
November 10, 2021Apollo Router: our GraphQL Federation runtime in Rust At Apollo, we help developers power the world’s most important applications with a graph. Whether you’re shopping online, booking travel, or binge-watching your favorite movies, you’re using the graph every day. These experiences are all built on Apollo Federation, an architecture for declaratively composing GraphQL APIs into a
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphQLを導入する時に考えておいたほうが良いこと | メルカリエンジニアリング
GraphQLの全体像とWebApp開発のこれから - Qiita
メルカリShops のフロントエンド | メルカリエンジニアリング
![さくらインターネットで活躍中の id:y_uukiを訪問 | はてな卒業生訪問企画 [#9] - Hatena Developer Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b5961cfe7e9736ef0e88bc0290b1599481d2626/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenatech%2F20240319%2F20240319125826.jpg)
再考: アプリ開発と状態遷移の管理 - ninjinkun's diary
GraphQLの誤解/rethinking-graphql
Apollo ServerとPrismaではじめるGraphQL API開発入門
Real World GraphQL on Next.js SSR
GraphQL 採用における反省と Apollo Server の運用について
GraphQLでフロントエンドの複雑性とたたかう
Apollo Federation で GraphQL マイクロサービスアーキテクチャを構築する
GraphQLのAPIを開発する時、スキーマ駆動開発をやめた話 - id:anatooのブログ
Fullstack app with TypeScript, Next.js, Prisma & GraphQL
GitHub - Quramy/gql-study-workshop
テスラに迫る!? 中国の自動運転をリードするBaidu/ApolloのAI戦略
Microservices の GraphQL スキーマを１つにまとめる - エムスリーテックブログ
React Apollo のキャッシュ機構とアクセス - tomoima525's blog
Apollo のキャッシュ機構、完全に理解した(い) - JX通信社エンジニアブログ
www.itmedia.co.jp
www.kyoto-np.co.jp
dic.nicovideo.jp
www.doutor.co.jp
discussionsjapan.apple.com
cloud.google.com