はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動く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は、アプリ
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
この記事は、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 は複雑 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 などほかのクライアントと比べ圧倒的です。 実際、一休
最近開発している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の状態管理とアー…
ハイクラス求人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社により開発・公開
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
この本では、TypeScriptで型安全にGraphQLサーバーを構築する方法をハンズオン形式で学習することができます。 Todoアプリの開発を通して、GraphQLスキーマの扱いやCLIツールの設定方法、TypeScriptのORMであるPrismaの基本的な使用方法、CI/CDパイプラインの構築によるマイグレーションの自動化などを体験します。 GraphQLサーバー実装の素振りをしておきたい方や、フロントエンドからGraphQL APIを使用したことはあるけど自分でAPIを実装したことはないようなバックエンドの開発初心者の方に向けた内容となっております。
NASA＝アメリカ航空宇宙局によりますと、月へ向かう途中、爆発事故に見舞われながらも奇跡の生還を果たしたアポロ13号の船長、ジェームズ・ラベルさんが7日、亡くなりました。97歳でした。 ラベルさんは、アメリカ・オハイオ州生まれ。 1968年、NASAの宇宙飛行士としてアポロ8号で人類初となる月の周回飛行を行いました。 その後、1970年に打ち上げられたアポロ13号の船長を務めましたが、月へ向かう途中、宇宙船の酸素タンクが爆発するトラブルに見舞われました。 電力が失われる中、ラベルさんは月への着陸を断念し、月着陸船を活用して電力や水を確保するなどの緊急措置を行い、全員を無事、地球に帰還させました。 この出来事は、「奇跡の生還」として1995年に映画化され、ラベルさんの役をトム・ハンクスさんが演じ、日本でも人気を博しました。 NASAによりますと、ラベルさんは7日、アメリカ・イリノイ州で亡くな
こんにちは。武田（@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
最近調べていた Apollo Federation についてのメモです。 Apollo Federation の概要と、Next.js の API Routes で Apollo Federation を使う例をまとめています。 Apollo Federationとは？ 以前 Netflix の GraphQL マイクロサービスアーキテクチャが話題になりました。その構成を支えているのが Apollo Federation です。 Apollo Federation は、複数の GraphQL マイクロサービスをゲートウェイでまとめて、1 つの GraphQL エンドポイントとして提供するものです。 Apollo Federation を使うことで、それぞれのマイクロサービス間で依存する処理を良い感じに統合してくれます。 例えば、投稿情報は Post マイクロサービスにあり、その投稿の投稿者
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
こんにちは。皆さんはGraphQL Code Generatorを利用していますか？ 筆者は普段React/TypeScript/Apollo Client(またはurql)といったスタックでWebフロントエンドを書いており、その際にはGraphQL Code Generatorをほぼ必需品と言えるほど愛用しています。 サーバー側から提供されたスキーマやクライアント側が必要なデータを宣言したオペレーションから型やコードを生成し利用することで、ロジックに関する実装量が大きく削減でき、ミスを減らすことにもつながります。GraphQLを使う理由の1つと言っても過言ではないでしょう。 そのGraphQL Code Generatorではv3 Roadmapとして今後の方針が公開されており、client-presetという新しいプリセットが紹介されています。そこでは「GraphQL Code Gen
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のAPIをNode.jsで開発する時に、スキーマ駆動開発をやってみたものの、途中でしんどくなってやめて最終的にはGraphQL Nexusに乗り換えた。 スキーマ駆動開発とは ここでいうGraphQLのスキーマ駆動開発というのは大まかに言うと、次のようなワークフローを指す。 GraphQLのスキーマを記述する GraphQLスキーマを元に、サーバ側の実装とクライアント側を実装する 実際に自分がGraphQLのAPIをNode.js+TypeScript+Apollo Serverで構築したときには、GraphQLのAPIを追加する際の具体的なワークフローとしては次のようになった。 GraphQLのスキーマを記述する graphql-code-generatorを使ってスキーマからリゾルバのTypeScript型定義を自動生成する リゾルバの型定義にしたがって、サーバ側のAPI
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
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傘下の会社で、自
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. Studio Edge ArchitectureThe first Domain Graph Service (DGS) on the platform was the former GraphQL
Wantedly でバックエンドエンジニアをしている @izumin5210 です。 この記事は GraphQL Advent Calendar 2020 の11日目の記事として書かれました。が、7割くらいは SSR についての議論のこり3割くらいが Apollo Client の話です。 最近、Apollo Client と SSR(Server Side Rendering) を利用した Web アプリケーションのパフォーマンス改善に取り組みました。この記事では「パフォーマンスの問題にどう立ち向かったか」および「そもそも問題を起こさない構造にするために何ができるか・何をすべきでないか」の考察をしていきます。 TL;DRパフォーマンス改善は計測・可視化からライブラリが用意してくれているフック機構を上手に使って計測していこうrenderToStringWithData では、renderT
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から直接インポ
こんにちは、マネーフォワード 福岡開発拠点のStart up Studio部で新規プロダクトを開発しているバックエンドエンジニアのダンと申します。 今回の記事は私たちのチームでマイクロサービスアーキテクチャにあるAPI Gatewayの課題を解決できるソリューションを検討の経緯、そして辿り着けた優れたGraphQL Federationについて紹介させていただきます。 課題 GraphQL Federationの前の世界 GraphQLの誕生 GraphQL Federation登場 - "One endpoint to rule them all" 1. 課題 まずは、マイクロサービスアーキテクチャによく出会うパターンの例を説明します。 製品をレビューするシステムを構築するプロジェクトで、フロントエンドとバックエンド二つのコンポーネントがある。 バックエンド側はドメインによる三つのサービ
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
TypeScript 今回のリニューアルで求められたことの一つとして、さらなる改善・新規機能追加などをしていく上で、ソフトウェア品質を担保するための、アプリケーションの堅牢さがありました。 そこで、フロントエンド側の開発言語としては、プログラムコード内で宣言された型によって、エラーを未然に防ぎつつ、VSCode をはじめとするエディタのコード補完の恩恵を受けられるメリット等を考慮して TypeScript の採用を決めました。また、他のプロジェクトでも既に TypeScript は部分的に利用し始めていた事情もあり、逆に TypeScript を採用しない、という選択肢はあまり考えられませんでした。 React UI を構築するためのライブラリ/フレームワークは React を採用しました。こちらも、弊社では別プロジェクトで React を既に利用し始めていたこともあり、学習コストの観点か
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
この記事は GraphQL Advent Calendar 2020 2日目の記事です。 前回は mtsmfm さんの記事でした。 GraphQL は REST などと同じく、DB のテーブルをそのまま露出するとは限らない - Qiita はじめに こんにちは、 shinnoki です。 フロントエンドで用いる GraphQL のクライアントは複数の選択肢が存在しますが、 React + TypeScript なプロジェクトでは Apollo Client が採用されることが多いのではないでしょうか。 Apollo Client の特徴のひとつに強力なキャッシュ機構がありますが、逆に理解しないと意図しない挙動になることもあったりと、初学者にとってはなかなかイメージを掴みづらいものになっています。 まず最初に結論として、「初めて Apollo Client を使うことになったけど、とにかく早
こんにちは！ マネーフォワード クラウド横断本部のWebエンジニアの はるやま (@linnefromice) です。 現在クラウド横断本部では BtoB 向けサービスのリプレイスプロジェクトの開発を行っており、今回は とフロントエンド開発においてそのプロジェクトで悩んだ点とそれに対する工夫の紹介をさせていただきたいと思います！(Special Thanks かわかみさん(@thinceller)、一緒にアーキテクチャの実現とこのフローを考えてもらいました) プロジェクトの特徴 今回のプロジェクトはリプレイスのため、既存のサービスで実現している機能の再現/改善または新規機能の開発を行うのですが、 現行サービスのコアモデル/データをベースに扱う必要がある サービスの特徴として、他のクラウドサービスとの連携により実現したい機能が多い のような特徴があります。 これらの特徴により、 サーバサイド
Apollo Client has a particularly challenging responsibility: to make interconnected GraphQL data easy to use on the client-side. In most rich client applications, we need the ability to cache data and pass it to components. We also need to know when to re-fetch data vs. when to return what’s already cached; this helps to avoid making unnecessary network requests. This kind of caching logic can be
こんにちは、 Web フロントエンドエンジニアの @progfay です。 この記事は Recruit Engineers Advent Calendar 2022 の 12 日目の記事です。 今回はプロジェクト内で使っている @graphql-codegen/typescript-react-apollo package との思い出を書き綴っていきます。 出会い 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では通信に GraphQL を採用しています。 また、 GraphQL Code Generator を使って GraphQL にまつわる型や関数の生成を行なっています。 Web Frontend では API Client として Apollo Client を使用しており、 TypeScript と React と Apollo Client を合わ
Blog /announcement /Frontend /Using Apollo Client with Next.js 13: releasing an official library to support the App Router Back to Blog May 10, 2023Using Apollo Client with Next.js 13: releasing an official library to support the App Router The latest release of Next.js 13 (13.4) declared the new app directory as stable and it will now be the default for new projects. The app directory is a major
はじめに 現在携わっているプロジェクトの技術選定で GraphQL を使うことになり、 GraphQL クライアントとして Apollo Client を採用することになりました。 最初は GraphQL をクライアントサイドで便利に使えるようにしてくれるものくらいの認識で、クライアント側の状態管理には別途 Redux とか入れるのかなと思っていたのですが、調査の過程でたまたま Apollo Client は Redux を置き換えるとの記事を見かけたので Apollo Client のキャッシュの仕組みと状態管理について少し調べてみました。 この記事では下記のことについて解説します。 Apollo Client とは Apollo Client のキャッシュの仕組み Reactive variables を利用したローカルの状態管理について かなり内容がもりもりになってしまったのですが、
270万ドル（約3億7000万円）で落札されたアポロ11号のバズ・オルドリン飛行士が着用した船内服。米ニューヨークのサザビーズで（2022年7月21日撮影）。(c)TIMOTHY A. CLARY / AFP 【7月27日 AFP】1969年に人類初の月面着陸を果たしたアポロ11号（Apollo 11）の乗組員、バズ・オルドリン（Buzz Aldrin）飛行士が着用した船内服が26日、270万ドル（約3億7000万円）で落札された。競売大手サザビーズ（Sotheby’s）が明らかにした。 落札された白い船内服には、米国旗と米航空宇宙局（NASA）のロゴとアポロ11号ミッションのワッペン、「E. ALDRIN」の名札が付いている。 サザビーズは「この極めて希少な服には複数の入札があった。10分ほど競り合った後、電話で参加の入札者が落札した」と発表した。 オークション前にオルドリン氏は、「多く
November 3, 2021Moving Apollo Federation 2 to the Elastic License v2 Today, we are introducing Apollo Federation 2, a major update to our graph composition technology that lets developers build and evolve a unified graph in a modular, principled way. Federation 2 is a new implementation of our query planner and execution gateway that introduces a more flexible model for how types and fields compos
Next.js に Apollo Server を立てるまでの備忘録です。 npx create-next-appで Next.js を作成して TypeScript の設定まで完了している前提で書きます。 依存モジュールの追加 Apollo Server の micro（Vercel が開発している非同期 HTTP サーバー）インテグレーションであるapollo-server-microを依存に追加します。
GraphQL TutorialsBoost your developer skills with our hands-on GraphQL tutorials and trainings
May 26, 2020 Testing Apollo Server with Typescript In this article, I will demonstrate a way to test GraphQL endpoints of an Apollo Server with a RESTDataSource in Typescript. Background At the beginning of the month, I joined a new project that is using Apollo Server as a back end for a front end. Some months before I joined, a RESTDataSource was introduced but the implemented code didn’t get tes
iOSDC2021 の発表資料です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く