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

Wantedly でバックエンドエンジニアをしている @izumin5210 です。 この記事は GraphQL Advent Calendar 2020 の11日目の記事として書かれました。が、7割くらいは SSR についての議論のこり3割くらいが Apollo Client の話です。 最近、Apollo Client と SSR(Server Side Rendering) を利用した Web アプリケーションのパフォーマンス改善に取り組みました。この記事では「パフォーマンスの問題にどう立ち向かったか」および「そもそも問題を起こさない構造にするために何ができるか・何をすべきでないか」の考察をしていきます。 TL;DRパフォーマンス改善は計測・可視化からライブラリが用意してくれているフック機構を上手に使って計測していこうrenderToStringWithData では、renderT

この記事は GraphQL Advent Calendar 2020 2日目の記事です。 前回は mtsmfm さんの記事でした。 GraphQL は REST などと同じく、DB のテーブルをそのまま露出するとは限らない - Qiita はじめに こんにちは、 shinnoki です。 フロントエンドで用いる GraphQL のクライアントは複数の選択肢が存在しますが、 React + TypeScript なプロジェクトでは Apollo Client が採用されることが多いのではないでしょうか。 Apollo Client の特徴のひとつに強力なキャッシュ機構がありますが、逆に理解しないと意図しない挙動になることもあったりと、初学者にとってはなかなかイメージを掴みづらいものになっています。 まず最初に結論として、「初めて Apollo Client を使うことになったけど、とにかく早

しんのきです。 自社サービスで Apollo Client の fetchMore を使ったページネーションを実装する際、出たばかりの TypedDocumentNode を思い出し、これを使えばもっとシンプルに型定義できそうだと思って調査してみました。 結果としては大きなハマりどころもなく期待通り動いてくれました。 （ちなみにドキュメントにもまだ反映されていませんが、 fetchMore と updateQueries を使ったページネーションは Apollo Client v3 で deprecated になっています。これはまた別のお話。） TypedDocumentNode とは TypedDocumentNode は graphql-codegen など GraphQL 関連のツール群を作っている The Guild が 2020 年 7 月にリリースした、 GraphQL ライ

Reactive variablesState containers integrated into Apollo Client's reactivity model New in Apollo Client 3, reactive variables are a useful mechanism for representing local state outside of the Apollo Client cache. Because they're separate from the cache, reactive variables can store data of any type and structure, and you can interact with them anywhere in your application without using GraphQL s

GraphQLのクライアントとしてデファクトスタンダードともいえる立ち位置にあるApollo。 キャッシュ機能が非常に便利な一方で、ちゃんと理解していないと沼にハマることもあります(n敗)。 最近はサーバをgraphql-rubyで書いてフロントはReactで書くというのをよくやるんですが、tsとgraphqlの相性が良かったり、apolloのhooksが非常に便利だったりと、書いてて健やかな気持ちになるんですよね。 今回はそんなフロントエンドの肝、Apollo Clientについて解説していきます。特にキャッシュあたり。 内容 - graphql-ruby + Reactのアプリケーションを使ってApolloのキャッシュ周りを触る(graphql-rubyは記事内では触れません) - セットアップや実装の話というよりはApolloの便利ポイント・挙動の解説メインです。 - graphql

本記事は はてなエンジニアAdvent Calendar 2019 3日目のエントリーです。 はじめに Apollo Client （執筆時 v2.6.4）は、Apollo プラットフォームが提供する JavaScript で実装された GraphQL クライアントです。Apollo Client には InMemoryCache （執筆時 v1.6.3）という強力なキャッシュ機構が用意されており、クエリの結果をキャッシュすることができます。このキャッシュ機構は、多くの場面で API サーバーとの通信回数を削減しパフォーマンスの向上に貢献します。しかし、Mutation によるオブジェクトの作成・更新・削除を行う際には、Apollo Client を使う側がその変更をキャッシュに反映するよう意識する必要があります。例えば、オブジェクトAを含むリストがキャッシュされていたとして、オブジェクト

Testing GraphQL doesn't have to be difficult. This article will explore static and dynamic mocks to make testing GraphQL a breeze. Imagine you're working on a new feature with another team. You're in charge of the React side, but someone else is in charge of the GraphQL changes. Is it possible for you to develop your side before they have finished theirs? Or how about wanting to test your componen

こんにちは。Android アプリ開発者の geckour です。 今回は、Android における GraphQL と Apollo についてお話しします。 はじめに Quipper では現在新規プロジェクトに取り組んでいて、その技術スタックの議論の中で「GraphQL を使っていきたい」という意見が出ました。 ただ、同プロジェクトの Android チーム内は GraphQL に明るくないメンバーがほとんどで、その選定に乗るか乗らないかの判断が難しい状況だったため、様々な調査・検討を行いました。 本記事では、そんな「GraphQL にあまり詳しくない方」を主対象に調査・検討の成果を簡単にお伝えできればと思います。 GraphQL まずは GraphQL についてのお話です。 GraphQL を学ぶ 先述の通り弊チームは GraphQL の知見があまりなかったため、勉強会を開くことからス

この記事は JX 通信社アドベントカレンダー、GraphQL アドベントカレンダーの4日目です こんにちは、JX通信社の小笠原(@yamitzky)です。普段はエンジニア部門の統括をしています。 弊社の NewsDigest ではアプリ向けのバックグラウンド API として GraphQL を使っています(サーバーは gqlgen、アプリはライブラリなし)。 tech.jxpress.net GraphQL の技術スタックとしては Apollo というライブラリが有名だと思うのですが、弊社では使ったことがありませんでした。そこで、今年の 9 月に箱根で開催した開発合宿にて、Apollo Client(React) と Apollo Server の検証を行いました。 Apollo Client を使うときに唯一鬼門だったのが、Apollo の持っているキャッシュ機構です。本日は、Apoll

Mutations in Apollo ClientModify data with the useMutation hook Now that we've learned how to query data from our backend with Apollo Client, the natural next step is to learn how to modify back-end data with mutations. This article demonstrates how to send updates to your GraphQL server with the useMutation hook. You'll also learn how to update the Apollo Client cache after executing a mutation,

こんにちは、エンジニアの川上(@natsumican63)です。 前回は、Webエンジニアのみで、ReactNativeアプリ開発を行った話を書きました。 ReactNativeアプリを開発した際、下記の技術を使用しました。 TypeScript React Native GraphQL Apollo Client 今回は、これらの技術スタックを用いた開発を行ってみた際の模様について、お伝えしていこうと思います。 要約 Rexux/Mobx等の状態管理ライブラリを使用せず、Apollo Clientのキャッシュ機構とReactのlocal stateのみで状態管理を行った @apollo/react-hooksを利用することで、通信周りのコードの見通しが良くなった TypeScript(クライアント側)と、GraphQLの型システムで、更に型安全な開発が望める Apollo Clientの