From 486f78252084526306e3e5a43c555ad9883291d5 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 01:32:40 +0200 Subject: [PATCH 01/39] Use green GetYourApiGameRight in case studies (per designers request) --- packages/web/docs/src/app/case-studies/(posts)/layout.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/layout.tsx b/packages/web/docs/src/app/case-studies/(posts)/layout.tsx index 73587f812b5..4be08228de9 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/layout.tsx +++ b/packages/web/docs/src/app/case-studies/(posts)/layout.tsx @@ -1,5 +1,4 @@ -import { GetYourAPIGameWhite } from '#components/get-your-api-game-white'; -import { cn, HiveLayoutConfig } from '@theguild/components'; +import { cn, GetYourAPIGameRightSection, HiveLayoutConfig } from '@theguild/components'; import { CaseStudiesHeader } from '../case-studies-header'; import { MoreStoriesSection } from '../more-stories-section'; import '../../hive-prose-styles.css'; @@ -20,7 +19,7 @@ export default function CaseStudiesLayout({ children }: { children: React.ReactN - + ); } From 5cede69d0c78bd4652ec951718cf2034a9f6578d Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 03:00:33 +0200 Subject: [PATCH 02/39] Grab Toast customer story draft from Notion --- .../app/case-studies/(posts)/toast/page.mdx | 320 ++++++++++++++++++ 1 file changed, 320 insertions(+) create mode 100644 packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx new file mode 100644 index 00000000000..99770c6f8c3 --- /dev/null +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -0,0 +1,320 @@ +--- +title: 'How Toast’s bet on Hive’s GraphQL open source stack paid off at scale' +excerpt: + "Toast's journey of migrating from Apollo to Hive to increased productivity, better support, + long-term stability, cost reduction and no vendor lock-in." +category: Point of Sale +authors: + - name: Uri Goldshtein + position: The Guild, Founder & CEO + avatar: https://avatars.githubusercontent.com/u/1297448?v=4 +--- + +import { DocsIcon, LargeCallout } from '#components/large-callout' +import { Lede } from '#components/lede' +import { SmallAvatar } from '#components/small-avatar' +import { CallToAction, ContactButton, ComparisonTable as Table } from '@theguild/components' + + + +In this article, we’ll cover how Toast, the worldwide market leader in restaurant management software, which powers more than 148,000 restaurants across the US, Canada, the UK and Ireland, scaled their business so they could keep moving and shipping fast while growing to unprecedented scale. + +Scaling to over 100 feature teams, 350 micro-frontends and 900 people in R&D, they keep shipping +fast using GraphQL Federation, fully managed by the Hive Platform. + + + +## Summary + +### Overview + +With rapid growth and more than 100 feature teams building in parallel, Toast needed a way to keep +their engineering fast and reliable. + +### Problem + +Apollo’s tooling became a bottleneck. Performance issues, limited support, and vendor lock-in risks +made it harder to manage a large federated setup and slowed down teams. + +### Solution + +Toast adopted Hive’s open GraphQL Federation platform in phases: starting with Hive Console as +schema registry, then introducing GraphQL Yoga and Hive Gateway. This allowed them to modernize +their stack step by step, without disrupting ongoing development. + +**Results** The move to Hive gave Toast a flexible and reliable foundation for scaling. Federation +now supports 350+ micro-frontends and 80 subgraphs, while teams continue to deliver features quickly +and safely. + +## Choosing a schema registry that scales + +At the beginning of adopting federation, Toast compared the different options for a schema registry. + +The main options were Apollo Studio and Hive Console. + +After extensive testing, Toast chose Hive Console: + +1. Reliability – Hive Console proved to have much better registry uptimes than Apollo Studio +2. It had all the features they needed while being actively growing and developing in the open +3. Fair and safe pricing that scales with their needs +4. No vendor-lock which gave them the option to individually choose the best pieces of their + architecture +5. Open source, which made sure it was there for years to come (a bet that proved true) and also + gave them the option to contribute features they cared a lot + ([example](https://github.com/graphql-hive/console/pull/5616)) +6. [Security](https://vercel.com/security) and compliance were paramount for Toast. Hive’s + infrastructure came with industry-standard security certifications, such as SOC2 Type2, with a + perfect score, providing peace of mind regarding data protection and privacy. +7. Support - Toast engineers always have direct access and close collaborations with the actual + engineers that build the Hive Platform, through a shared Slack channel - not through intermediary + sales/support engineers + +## Background + +Toast was founded in 2012 with a monolithic Android POS and web application with a single database. + +To keep performing efficiently, Toast pivoted to micro-services, allowing teams to move fast +independently. Today they have over 100 feature teams. + +For more details, +[read here](https://technology.toasttab.com/entry/navigating-the-graphql-evolution-at-toast-from-bffs-to-federation/) +the full story of how they successfully moved from REST to BFF to GraphQL to GraphQL Federation in +order to stay efficient at huge scale - with a strong focus on productivity for individual teams and +clear separation. + +That article also highlights the importance of a good schema registry to move fast safely. + +## Gateway and subgraphs – Starting with Apollo, scaling with Hive + +As they were adopting GraphQL Federation, they used Apollo’s gateway and subgraphs to do that. + +As they scaled GraphQL Federation across the organization and different teams, they saw some +shortcomings with their federation solution: + +1. The implementations of Apollo Gateway and Apollo server weren’t well maintained, up to date, and + performant enough +2. Active support from core developers of the platform was lacking, including responses to feature + requests and raised issues + +## Gradual migration path + +Thanks to Hive and The Guild’s open-source tooling, it was possible to gradually migrate the +federated architecture, piece by piece, and only when necessary. + +For most companies, the first step is to migrate the schema registry and GraphQL Platform from +Apollo Studio to Hive Console. + +The technical transition is a one line change, and during the evaluation period, The Guild provides +companies with free credits so they could send information to both platforms and compare, making +sure the transition is safe first. + +As Hive Console supports any gateway and router, including Apollo Gateway and Apollo Router, and +also supports any subgraphs, including Apollo Server, Toast was able to use Hive Console while +keeping their existing implementations. + +As Toast already chose Hive Console from the start, they were good to go and could focus on the +later phases of the migration when they actually felt the need. + +Second phase of the transition was to migrate from the unmaintained Apollo Server to GraphQL Yoga +server by The Guild, which +[outperforms Apollo Server in every single metric](https://the-guild.dev/graphql/yoga-server/docs/comparison). + +Third phase was to migrate Apollo Gateway to Hive Gateway, which resulted in easier maintenance, +more flexibility and significantly greater performance and efficiency on Toast’s Gateway. That phase +can also be done gradually and in smaller chunks. + +Hive Gateway also provided Toast with access to all of Apollo’s Paid Enterprise features for free, +without the need for plans or vendor lock-in like GraphQL Subscriptions, Defer and others. + +## Contact us to learn how you can gradually migrate from Apollo to Hive’s open platform + +Tell us about your current stack and we’ll make sure to give you our unbiased opinion on how to best +scale your platform using GraphQL. + +## The technical profile and journey of Toast + +In this section we’ll cover more technical details that might be interesting for any GraphQL +developer to learn and get inspired by, for their own journey. + + + + + Number of teams + over 100 feature teams + + + Number of technical people in the org + Around 900 people in R&D + + + Structure of teams + + In general — domain horizontal full stack feature teams with a couple of flat focus teams + + + + Apps, consumers and clients of the graph + + 350 micro frontends : Apollo Client + Codegen : Native mobile : Point for improvement — + Currently they are not utilizing fragment based co-location too much. : Next phase — AI + consumers of the graph + + + + Number of subgraphs + 80 subgraphs + + + Gateway + + 2 gateways — one for client facing and one for restaurant admin — both using Hive Gateway : + Using Node 20 + + + + Schema Registry + [Hive Console](https://the-guild.dev/graphql/hive) + + + Subgraphs stack + Kotlin with graphql-java — using GraphQL for all new functionality + + + Infrastructure + AWS + + + Auth implementation + — + + + Observability and tracing + + Hive Insights and DataDog tracking : Looking into the new Hive Metrics features + + + + Schema evolution process + — + + + Local development process and tooling + + Toast created their own tool for efficient local development called “PrepStation” : The tool + deeply integrates with Hive Console, Storybook, GraphQL Codegen and Yoga Server to + seamlessly merge together local and remote subgraphs and composes them locally. : It also + creates a mocked local gateway instance and together. : Using this setup, feature teams can + prototype and work locally with upcoming versions of the graph, and create full prototypes + to stakeholders before production or backend teams need to do any work. : The Toast team + gave a [great + talk](https://graphql.org/conf/2024/schedule/19cf965c68cfae3c7c19c6a9966bcadf/) about it at + GraphQL Conf. + + + +
+ +### How they got to this architecture + +#### Initial Approach + +Toast had a long evolution to get to where they are today. Some of it was already discussed at the +beginning of the article, but to expand a bit, they started with one big REST BFF, which grew into +30-40 REST BFFs. They first started GraphQL BFF at the guest side. It began with a SPA that had a +Node BFF written in GraphQL. Later, the restaurant admin side also discovered GraphQL, used the same +structure and added 30–40 GraphQL BFFs — each team had their own REST API (Kotlin) with a Node +GraphQL BFF on top. + +As more teams, like the Mobile app, needed the same data from multiple BFFs, that led them into +adopting Federation and the federated graph, still using the same model where each team feature had +their own REST API (Kotlin) and Node GraphQL BFF on top. Federation proved to be a great bet, +growing rapidly into the company. Not only on the restaurant admin side, it was also extended to +Guest side, all of them were using GraphQL Federation as their frontend API gateway, which helped +them to bring consistency within all their platforms, including ToastNow their native mobile +application – a high throughput, simpler auth solution. Also with the years, Toast also made +acquisitions which merged and federated together into the Supergraph. But as Federated GraphQL BFFs +grew by the numbers, that also led to logic creeping into the BFF layer. + +#### Current Architecture + +So the next evolution was for the Kotlin side of the team to gradually remove REST, replace it with +GraphQL and directly federate into Hive Gateway, without the need of a Node GraphQL BFF in between. + +This is the current architecture but as with all things, it is happening gradually, so there are +still some Node BFFs and when there is a new functionality being added, the Kotlin team would +gradually remove REST, move business logic from the Node BFF (that accumulated there for years) and +expose it all as GraphQL. + +So the current Hive Gateways federate a combination of Node GraphQL BFFs and Kotlin GraphQL +subgraphs which are all registered into Hive Console. + +## Next steps for Toast and the Hive Platform team + +As the Toast GraphQL teams and The Guild are working closely together, we make sure to align our +roadmap with Toast’s needs. + +Here are some of their future plans: + +### Feedback on the new public API + +Since Hive released their new public API, a lot of integrations with internal systems at Toast could +be made much simpler. + +We are looking forward to seeing how they utilise the new API and if there are ways we can improve +it to make it easier for them. + +One area we know we want a tighter integration is with their internal Backstage system. + +### Usage reporting (OTEL, insights page, and errors) + +We recently introduced a new system for gathering and managing OTEL metrics on Hive for selected +customers. + +This also affects Hive’s current insights page, which uses the current agent and query schema +coordinates to show valuable data for customers. + +As we design these new pages, we work closely with Toast to make sure we take their needs into +account on the new design. + +### New and improved alerting and webhooks system + +Based on the above features, we are currently in the process of redesigning our alerting and +webhooks system. + +There are a lot of options here so we work closely with Toast to make sure we are covering +everything they need in the best way possible. + +### Schema proposals + +Hive is close to shipping the first version of schema proposals to selected customers for feedback. + +Toast is excited to try it out and see how it would best fit and improve their current schema change +processes. + +### Progressive override + +An important Federation feature that allows gradual migration of features from one subgraph to +another. + +As Toast is migrating types and fields from the current Node GraphQL BFFs to the Kotlin subgraphs, +this becomes important for them. + +### New laboratory rebuild + +Hive is in the process of completely rebuilding our laboratory experience. + +We’ve hired a few people who built that experience on other platforms and are now bringing that +knowledge into a new, improved experience. + +Toast gave us tons of valuable feedback and we hope to get an exciting new experience to them very +soon. + +### MCP and AI integrations and use cases + +Toast is very forward-looking and already has tons of AI use cases, both internally and customer +facing ones. + +We work hard to make sure they get everything they need for these use cases from their API layer. + +That includes reviewing existing solutions, finding the missing points and supporting those in our +platform. From dc400c55ece00b0ea35b33d179eb095fd01dc752 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 03:00:47 +0200 Subject: [PATCH 03/39] Add Toast logo --- .../src/app/case-studies/company-logos.tsx | 3 ++- .../src/components/company-logos/index.tsx | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/company-logos.tsx b/packages/web/docs/src/app/case-studies/company-logos.tsx index 0cf98470dd2..3e8a1c02bd2 100644 --- a/packages/web/docs/src/app/case-studies/company-logos.tsx +++ b/packages/web/docs/src/app/case-studies/company-logos.tsx @@ -1,4 +1,4 @@ -import { SoundYXZLogo, WealthsimpleLogo } from '../../components/company-logos'; +import { SoundYXZLogo, WealthsimpleLogo, ToastLogo } from '../../components/company-logos'; /** * Take note that these logos may have different dimensions than logos used elsewhere. @@ -6,6 +6,7 @@ import { SoundYXZLogo, WealthsimpleLogo } from '../../components/company-logos'; export const companyLogos = { 'sound-xyz': , wealthsimple: , + toast: , }; export function getCompanyLogo(company: string) { diff --git a/packages/web/docs/src/components/company-logos/index.tsx b/packages/web/docs/src/components/company-logos/index.tsx index a8e161db634..8beb9477336 100644 --- a/packages/web/docs/src/components/company-logos/index.tsx +++ b/packages/web/docs/src/components/company-logos/index.tsx @@ -254,3 +254,22 @@ export function ProdigyLogo(props: LogoProps) { ); } + +export function ToastLogo(props: LogoProps) { + return ( + + ); +} From e3b2deb01acde1acc0365d4b5aeb359906ee6cad Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 03:00:59 +0200 Subject: [PATCH 04/39] Keep cards equal height in case studies list --- .../web/docs/src/app/case-studies/all-case-studies-list.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx b/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx index f3abb9704df..045da3a774c 100644 --- a/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx +++ b/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx @@ -12,12 +12,13 @@ export function AllCaseStudiesList({ caseStudies }: { caseStudies: CaseStudyFile
    {caseStudies.map(caseStudy => { return ( -
  • +
    • ); From a58797211461df0a2f6ae251d555d87f51241120 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 03:01:11 +0200 Subject: [PATCH 05/39] Make GetYourAPIGameRight section in Case Studies readable in dark mode --- packages/web/docs/src/app/case-studies/(posts)/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/layout.tsx b/packages/web/docs/src/app/case-studies/(posts)/layout.tsx index 4be08228de9..1d75caf990b 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/layout.tsx +++ b/packages/web/docs/src/app/case-studies/(posts)/layout.tsx @@ -19,7 +19,7 @@ export default function CaseStudiesLayout({ children }: { children: React.ReactN - + ); } From c91c2fc69b4af246a2c35ada9d851a4cef56e413 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 03:01:21 +0200 Subject: [PATCH 06/39] Apply hive prose colors to nested articles --- packages/web/docs/src/app/hive-prose-styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/hive-prose-styles.css b/packages/web/docs/src/app/hive-prose-styles.css index 7c0ee590e68..8c710eacf89 100644 --- a/packages/web/docs/src/app/hive-prose-styles.css +++ b/packages/web/docs/src/app/hive-prose-styles.css @@ -1,4 +1,5 @@ -.hive-prose { +.hive-prose, +.hive-prose article { --nextra-content-width: 1208px; --article-max-width: 640px; From bf9416dd0d49ffe7f710277cf9cf7254b21e5317 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 03:17:33 +0200 Subject: [PATCH 07/39] Format --- packages/web/docs/src/app/case-studies/company-logos.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/company-logos.tsx b/packages/web/docs/src/app/case-studies/company-logos.tsx index 3e8a1c02bd2..059f2b5845d 100644 --- a/packages/web/docs/src/app/case-studies/company-logos.tsx +++ b/packages/web/docs/src/app/case-studies/company-logos.tsx @@ -1,4 +1,4 @@ -import { SoundYXZLogo, WealthsimpleLogo, ToastLogo } from '../../components/company-logos'; +import { SoundYXZLogo, ToastLogo, WealthsimpleLogo } from '../../components/company-logos'; /** * Take note that these logos may have different dimensions than logos used elsewhere. From 0671112f8ceba9222fd256f1ff12f331cb416313 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 08:54:28 +0200 Subject: [PATCH 08/39] Add dates to case study frontmatters --- .../web/docs/src/app/case-studies/(posts)/sound-xyz/page.mdx | 1 + packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx | 4 +++- .../docs/src/app/case-studies/(posts)/wealthsimple/page.mdx | 1 + packages/web/docs/src/app/case-studies/case-study-types.ts | 4 ++++ 4 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/sound-xyz/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/sound-xyz/page.mdx index 1225a9ae7c1..bd6ae286914 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/sound-xyz/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/sound-xyz/page.mdx @@ -4,6 +4,7 @@ excerpt: 'Sound.xyz is revolutionizing the music industry by addressing two critical challenges: the concentration of streaming revenue among top artists and the inadequate compensation per stream.' category: Music +date: 2025-01-27 authors: - name: David Greenstein position: Co-Founder diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index 99770c6f8c3..ee01d0c746e 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -1,13 +1,15 @@ --- -title: 'How Toast’s bet on Hive’s GraphQL open source stack paid off at scale' +title: 'How Toast's bet on Hive's GraphQL open source stack paid off at scale' excerpt: "Toast's journey of migrating from Apollo to Hive to increased productivity, better support, long-term stability, cost reduction and no vendor lock-in." category: Point of Sale +date: 2025-10-23 authors: - name: Uri Goldshtein position: The Guild, Founder & CEO avatar: https://avatars.githubusercontent.com/u/1297448?v=4 + --- import { DocsIcon, LargeCallout } from '#components/large-callout' diff --git a/packages/web/docs/src/app/case-studies/(posts)/wealthsimple/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/wealthsimple/page.mdx index 495a87afef6..f5ee2a2ab92 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/wealthsimple/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/wealthsimple/page.mdx @@ -4,6 +4,7 @@ excerpt: 'As the company scaled, the need for a robust, flexible, and efficient API architecture became paramount, leading to the adoption of GraphQL with Hive as their central API management solution.' category: Finance +date: 2025-01-27 # We would need to go through approval to get author images. I guess we can leave this as is for now. authors: - name: diff --git a/packages/web/docs/src/app/case-studies/case-study-types.ts b/packages/web/docs/src/app/case-studies/case-study-types.ts index 3b9bf7fccbf..653e761a3fc 100644 --- a/packages/web/docs/src/app/case-studies/case-study-types.ts +++ b/packages/web/docs/src/app/case-studies/case-study-types.ts @@ -5,6 +5,10 @@ export type CaseStudyFrontmatter = { excerpt: string; category: string; authors: CaseStudyAuthor[]; + /** + * YYYY-MM-DD + */ + date: `${number}-${number}-${number}`; }; export type CaseStudyAuthor = { From e035396eaedf0f1ce69d951097d52573ee1b07b3 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 09:19:28 +0200 Subject: [PATCH 09/39] Fix fill-rule --- packages/web/docs/src/components/company-logos/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web/docs/src/components/company-logos/index.tsx b/packages/web/docs/src/components/company-logos/index.tsx index 8beb9477336..12197323906 100644 --- a/packages/web/docs/src/components/company-logos/index.tsx +++ b/packages/web/docs/src/components/company-logos/index.tsx @@ -258,16 +258,16 @@ export function ProdigyLogo(props: LogoProps) { export function ToastLogo(props: LogoProps) { return ( From fc261ff46f1ac96fac9b0079e7bda3eb92232d82 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 09:19:44 +0200 Subject: [PATCH 10/39] Add Uri's avatar to the repo to make it load faster --- .../app/case-studies/(posts)/toast/page.mdx | 27 +++++++++--------- .../app/case-studies/(posts)/toast/uri.webp | Bin 0 -> 414 bytes 2 files changed, 14 insertions(+), 13 deletions(-) create mode 100644 packages/web/docs/src/app/case-studies/(posts)/toast/uri.webp diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index ee01d0c746e..a6a8cd921ce 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -1,16 +1,17 @@ ---- -title: 'How Toast's bet on Hive's GraphQL open source stack paid off at scale' -excerpt: - "Toast's journey of migrating from Apollo to Hive to increased productivity, better support, - long-term stability, cost reduction and no vendor lock-in." -category: Point of Sale -date: 2025-10-23 -authors: - - name: Uri Goldshtein - position: The Guild, Founder & CEO - avatar: https://avatars.githubusercontent.com/u/1297448?v=4 - ---- +export const metadata = { + title: "How Toast's bet on Hive's GraphQL open source stack paid off at scale", + excerpt: + "Toast's journey of migrating from Apollo to Hive to increased productivity, better support, long-term stability, cost reduction and no vendor lock-in.", + category: 'Point of Sale', + date: '2025-10-23', + authors: [ + { + name: 'Uri Goldshtein', + position: 'The Guild, Founder & CEO', + avatar: new URL('./uri.webp', import.meta.url).href + } + ] +} import { DocsIcon, LargeCallout } from '#components/large-callout' import { Lede } from '#components/lede' diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/uri.webp b/packages/web/docs/src/app/case-studies/(posts)/toast/uri.webp new file mode 100644 index 0000000000000000000000000000000000000000..b0f45ee49fdd7b334d3ef163377092757fccd30d GIT binary patch literal 414 zcmV;P0b%}9Nk&GN0RRA3MM6+kP&gop0RRB-2>_h|Dlh;r06vjAnMb9gqM<6aUZ}7V z31tAdW5^D|k_~S(xik6H;@F$0Nm37`Oh3kgD0th=|K4w&_2S^yg&`(C;8F73XEV z<2kJ&big8#obFeSBNwmhj!u8-(W=XGtRr7uz;n4wkYp{!qD|G~U29{}@$hQYNJ@m^ zlYPrz)!%wa-{|=_8q5fBvDdOFaY-MMEJUQaBuS#+rgW@Jf`FAN Date: Thu, 23 Oct 2025 09:19:57 +0200 Subject: [PATCH 11/39] Use the column layout even on tablet screens --- .../web/docs/src/app/case-studies/all-case-studies-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx b/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx index 045da3a774c..014db2f1340 100644 --- a/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx +++ b/packages/web/docs/src/app/case-studies/all-case-studies-list.tsx @@ -9,7 +9,7 @@ export function AllCaseStudiesList({ caseStudies }: { caseStudies: CaseStudyFile Explore customer stories -
      +
        {caseStudies.map(caseStudy => { return (
      • From cf032c50c0240f7ca4e9d144b5f71c9ec857bc23 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 09:20:06 +0200 Subject: [PATCH 12/39] Optically balance the logos --- packages/web/docs/src/app/case-studies/company-logos.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/company-logos.tsx b/packages/web/docs/src/app/case-studies/company-logos.tsx index 059f2b5845d..6c56a4e7a21 100644 --- a/packages/web/docs/src/app/case-studies/company-logos.tsx +++ b/packages/web/docs/src/app/case-studies/company-logos.tsx @@ -6,7 +6,7 @@ import { SoundYXZLogo, ToastLogo, WealthsimpleLogo } from '../../components/comp export const companyLogos = { 'sound-xyz': , wealthsimple: , - toast: , + toast: , }; export function getCompanyLogo(company: string) { From 8788ec9c33d7a33e692fba8297ce889fbe40842d Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 09:20:26 +0200 Subject: [PATCH 13/39] Order the case studies by dates descending --- packages/web/docs/src/app/case-studies/page.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/page.tsx b/packages/web/docs/src/app/case-studies/page.tsx index 569feb54dcb..94956129320 100644 --- a/packages/web/docs/src/app/case-studies/page.tsx +++ b/packages/web/docs/src/app/case-studies/page.tsx @@ -22,7 +22,11 @@ export const metadata = { export default async function CaseStudiesPage() { const [_meta, _indexPage, ...pageMap] = await getPageMap('/case-studies'); - const caseStudies = pageMap.filter(isCaseStudy); + const caseStudies = pageMap.filter(isCaseStudy).sort((a, b) => { + const aDate = a.frontMatter.date; + const bDate = b.frontMatter.date; + return aDate < bDate ? 1 : aDate > bDate ? -1 : 0; + }); return ( From a7ec765c9b9b5c570dcd8285da09f298e525fa64 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 09:45:12 +0200 Subject: [PATCH 14/39] Scroll to top when opening a blog post (weird default) --- .../docs/src/app/blog/components/blog-card.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/web/docs/src/app/blog/components/blog-card.tsx b/packages/web/docs/src/app/blog/components/blog-card.tsx index 8ab5822b28f..5d8911703f7 100644 --- a/packages/web/docs/src/app/blog/components/blog-card.tsx +++ b/packages/web/docs/src/app/blog/components/blog-card.tsx @@ -20,11 +20,15 @@ export function BlogCard({ post, className, variant, tag }: BlogCardProps) { const { title, tags } = frontmatter; const date = new Date(frontmatter.date); - const postAuthors: Author[] = ( - typeof frontmatter.authors === 'string' - ? [authors[frontmatter.authors as AuthorId]] - : frontmatter.authors.map(author => authors[author as AuthorId]) - ).filter(Boolean); + const authorsArray = Array.isArray(frontmatter.authors) + ? frontmatter.authors + : [frontmatter.authors]; + + const postAuthors: Author[] = authorsArray + .map((authorId: AuthorId | Author) => + typeof authorId === 'string' ? authors[authorId] : authorId, + ) + .filter(Boolean); if (postAuthors.length === 0) { console.error('author not found', frontmatter); @@ -44,6 +48,7 @@ export function BlogCard({ post, className, variant, tag }: BlogCardProps) { className, )} href={post.route} + scroll >
        Date: Thu, 23 Oct 2025 09:45:43 +0200 Subject: [PATCH 15/39] Allow blog posts to inlne authors --- packages/web/docs/src/app/blog/blog-types.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web/docs/src/app/blog/blog-types.ts b/packages/web/docs/src/app/blog/blog-types.ts index af66fb7d7af..1c24312a221 100644 --- a/packages/web/docs/src/app/blog/blog-types.ts +++ b/packages/web/docs/src/app/blog/blog-types.ts @@ -1,9 +1,11 @@ import type { StaticImageData } from 'next/image'; -import { AuthorId } from '../../authors'; -import { MdxFile, PageMapItem } from '../../mdx-types'; +import type { Author, AuthorId } from '../../authors'; +import type { MdxFile, PageMapItem } from '../../mdx-types'; + +type OneOrMany = T | T[]; export interface BlogFrontmatter { - authors: AuthorId | AuthorId[]; + authors: OneOrMany; title: string; date: string; tags: string | string[]; From 8a1ef514e15d516c8216febea909c04c236b6621 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 09:57:57 +0200 Subject: [PATCH 16/39] Show case studies in blog --- .../web/docs/src/app/blog/feed.xml/route.ts | 20 +++++++------ packages/web/docs/src/app/blog/page.tsx | 28 +++++++++++++++++-- .../src/app/case-studies/get-case-studies.ts | 14 ++++++++++ .../web/docs/src/app/case-studies/page.tsx | 11 ++------ .../(posts)/product-update-header.tsx | 22 +++++++-------- 5 files changed, 64 insertions(+), 31 deletions(-) create mode 100644 packages/web/docs/src/app/case-studies/get-case-studies.ts diff --git a/packages/web/docs/src/app/blog/feed.xml/route.ts b/packages/web/docs/src/app/blog/feed.xml/route.ts index a2ab7786883..272e737fe59 100644 --- a/packages/web/docs/src/app/blog/feed.xml/route.ts +++ b/packages/web/docs/src/app/blog/feed.xml/route.ts @@ -2,11 +2,17 @@ import RSS from 'rss'; import { getPageMap } from '@theguild/components/server'; import { AuthorId, authors } from '../../../authors'; -import { isBlogPost } from '../blog-types'; +import { BlogFrontmatter, isBlogPost } from '../blog-types'; -function getAuthor(name: string) { - const author = authors[name as AuthorId]?.name; - return author ?? name; +function getAuthor(frontmatterAuthors: BlogFrontmatter['authors']): string { + const first = Array.isArray(frontmatterAuthors) ? frontmatterAuthors[0] : frontmatterAuthors; + + if (typeof first === 'string') { + const author = authors[first as AuthorId]; + return author ? author.name : 'Unknown Author'; + } + + return first.name; } export async function GET() { @@ -20,11 +26,7 @@ export async function GET() { date: new Date(item.frontMatter.date), url: `https://the-guild.dev/graphql/hive${item.route}`, description: (item.frontMatter as any).description ?? '', - author: getAuthor( - typeof item.frontMatter.authors === 'string' - ? item.frontMatter.authors - : item.frontMatter.authors.at(0)!, - ), + author: getAuthor(item.frontMatter.authors), categories: Array.isArray(item.frontMatter.tags) ? item.frontMatter.tags : [item.frontMatter.tags], diff --git a/packages/web/docs/src/app/blog/page.tsx b/packages/web/docs/src/app/blog/page.tsx index 378d540f83f..a8c36466aed 100644 --- a/packages/web/docs/src/app/blog/page.tsx +++ b/packages/web/docs/src/app/blog/page.tsx @@ -1,5 +1,8 @@ import { getPageMap } from '@theguild/components/server'; -import { isBlogPost } from './blog-types'; +import type { Author } from '../../authors'; +import { CaseStudyFile } from '../case-studies/case-study-types'; +import { getCaseStudies } from '../case-studies/get-case-studies'; +import { BlogFrontmatter, BlogPostFile, isBlogPost } from './blog-types'; import { NewsletterFormCard } from './components/newsletter-form-card'; import { PostsByTag } from './components/posts-by-tag'; // We can't move this page to `(index)` dir together with `tag` page because Nextra crashes for @@ -13,7 +16,10 @@ export const metadata = { export default async function BlogPage() { const [_meta, _indexPage, ...pageMap] = await getPageMap('/blog'); - const allPosts = pageMap.filter(isBlogPost); + + const caseStudies = await getCaseStudies().then(coerceCaseStudiesToBlogs); + + const allPosts = pageMap.filter(isBlogPost).concat(caseStudies); return ( @@ -23,3 +29,21 @@ export default async function BlogPage() { ); } + +function coerceCaseStudiesToBlogs(caseStudies: CaseStudyFile[]): BlogPostFile[] { + return caseStudies.map(caseStudy => ({ + ...caseStudy, + frontMatter: { + ...caseStudy.frontMatter, + tags: ['Case Study'], + authors: caseStudy.frontMatter.authors.map( + (author): Author => ({ + name: author.name, + avatar: author.avatar, + link: '' as 'https://', + github: '', + }), + ), + } satisfies BlogFrontmatter, + })); +} diff --git a/packages/web/docs/src/app/case-studies/get-case-studies.ts b/packages/web/docs/src/app/case-studies/get-case-studies.ts new file mode 100644 index 00000000000..47d13a790fc --- /dev/null +++ b/packages/web/docs/src/app/case-studies/get-case-studies.ts @@ -0,0 +1,14 @@ +import { getPageMap } from '@theguild/components/server'; +import { isCaseStudy } from './isCaseStudyFile'; + +export async function getCaseStudies() { + const [_meta, _indexPage, ...pageMap] = await getPageMap('/case-studies'); + + const caseStudies = pageMap.filter(isCaseStudy).sort((a, b) => { + const aDate = a.frontMatter.date; + const bDate = b.frontMatter.date; + return aDate < bDate ? 1 : aDate > bDate ? -1 : 0; + }); + + return caseStudies; +} diff --git a/packages/web/docs/src/app/case-studies/page.tsx b/packages/web/docs/src/app/case-studies/page.tsx index 94956129320..0d7bc551739 100644 --- a/packages/web/docs/src/app/case-studies/page.tsx +++ b/packages/web/docs/src/app/case-studies/page.tsx @@ -5,7 +5,6 @@ import { Heading, HiveLayoutConfig, } from '@theguild/components'; -import { getPageMap } from '@theguild/components/server'; import { GetYourAPIGameWhite } from '../../components/get-your-api-game-white'; import { HeroLinks } from '../../components/hero'; import { LandingPageContainer } from '../../components/landing-page-container'; @@ -13,20 +12,14 @@ import { TrustedBySection } from '../../components/trusted-by-section'; import { AllCaseStudiesList } from './all-case-studies-list'; import { CaseStudiesArchDecoration, CaseStudiesGradientDefs } from './case-studies-arch-decoration'; import { FeaturedCaseStudiesGrid } from './featured-case-studies-grid'; -import { isCaseStudy } from './isCaseStudyFile'; +import { getCaseStudies } from './get-case-studies'; export const metadata = { title: 'Case Studies', }; export default async function CaseStudiesPage() { - const [_meta, _indexPage, ...pageMap] = await getPageMap('/case-studies'); - - const caseStudies = pageMap.filter(isCaseStudy).sort((a, b) => { - const aDate = a.frontMatter.date; - const bDate = b.frontMatter.date; - return aDate < bDate ? 1 : aDate > bDate ? -1 : 0; - }); + const caseStudies = await getCaseStudies(); return ( diff --git a/packages/web/docs/src/app/product-updates/(posts)/product-update-header.tsx b/packages/web/docs/src/app/product-updates/(posts)/product-update-header.tsx index a7dbca31023..441460d4de3 100644 --- a/packages/web/docs/src/app/product-updates/(posts)/product-update-header.tsx +++ b/packages/web/docs/src/app/product-updates/(posts)/product-update-header.tsx @@ -2,11 +2,11 @@ import { format } from 'date-fns'; import { Anchor, cn, useConfig } from '@theguild/components'; -import { AuthorId, authors } from '../../../authors'; +import { Author, AuthorId, authors } from '../../../authors'; import { SocialAvatar } from '../../../components/social-avatar'; type Meta = { - authors: AuthorId[]; + authors: (AuthorId | Author)[]; date: string; title: string; description: string; @@ -21,8 +21,13 @@ export const ProductUpdateAuthors = ({ }) => { const date = meta.date ? new Date(meta.date) : new Date(); - if (meta.authors.length === 1) { - const author = authors[meta.authors[0] as AuthorId]; + const metaAuthors = meta.authors.map(author => { + return typeof author === 'string' ? authors[author as AuthorId] : author; + }); + + if (metaAuthors.length === 1) { + const author = metaAuthors[0]; + if (!author) { throw new Error(`Author ${meta.authors[0]} not found`); } @@ -66,14 +71,9 @@ export const ProductUpdateAuthors = ({ {format(date, 'EEEE, LLL do y')}
        - {meta.authors.map(authorId => { - const author = authors[authorId as AuthorId]; - if (!author) { - throw new Error(`Author ${authorId} not found`); - } - + {metaAuthors.map(author => { return ( -
        +
        Date: Thu, 23 Oct 2025 18:26:53 +0300 Subject: [PATCH 17/39] Ensure correct text color in dark mode in UpsellBlock --- .../src/app/case-studies/looking-to-use-hive-upsell-block.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx b/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx index fa7258d6cbd..97f0977ebfa 100644 --- a/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx +++ b/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx @@ -4,7 +4,7 @@ export function LookingToUseHiveUpsellBlock({ className }: { className?: string return (
        From 6606179ed6a2386bb93ddc79d1c54ced7377392a Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 18:36:03 +0300 Subject: [PATCH 18/39] Improve styles --- .../web/docs/src/app/case-studies/(posts)/toast/page.mdx | 4 ++-- .../app/case-studies/looking-to-use-hive-upsell-block.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index a6a8cd921ce..e865a4837e6 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -139,9 +139,9 @@ scale your platform using GraphQL. In this section we’ll cover more technical details that might be interesting for any GraphQL developer to learn and get inspired by, for their own journey. - +
        - + Number of teams over 100 feature teams diff --git a/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx b/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx index 97f0977ebfa..7f741cc812c 100644 --- a/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx +++ b/packages/web/docs/src/app/case-studies/looking-to-use-hive-upsell-block.tsx @@ -2,9 +2,9 @@ import { cn, ContactButton, DecorationIsolation, Heading } from '@theguild/compo export function LookingToUseHiveUpsellBlock({ className }: { className?: string }) { return ( -
        @@ -21,7 +21,7 @@ export function LookingToUseHiveUpsellBlock({ className }: { className?: string > Talk to us -
        + ); } From c29958ae4e0166e783f23f9269d65b2c6acb6971 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 18:48:50 +0300 Subject: [PATCH 19/39] Repeat a height fix --- .../case-studies/more-stories-section/other-case-studies.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/case-studies/more-stories-section/other-case-studies.tsx b/packages/web/docs/src/app/case-studies/more-stories-section/other-case-studies.tsx index c2e9a078c4c..09bc049c124 100644 --- a/packages/web/docs/src/app/case-studies/more-stories-section/other-case-studies.tsx +++ b/packages/web/docs/src/app/case-studies/more-stories-section/other-case-studies.tsx @@ -14,12 +14,13 @@ export function OtherCaseStudies({ caseStudies }: { caseStudies: CaseStudyFile[] .slice(0, 3) .map((item, i) => { return ( -
      • +
        • ); From f5267c63875f62cf533c83622b3a8d522d4face0 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 18:49:03 +0300 Subject: [PATCH 20/39] Fix a missing alt (it was duplicate to text anyway) --- packages/web/docs/src/app/blog/components/blog-card.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web/docs/src/app/blog/components/blog-card.tsx b/packages/web/docs/src/app/blog/components/blog-card.tsx index 5d8911703f7..526855de378 100644 --- a/packages/web/docs/src/app/blog/components/blog-card.tsx +++ b/packages/web/docs/src/app/blog/components/blog-card.tsx @@ -79,7 +79,8 @@ export function BlogCard({ post, className, variant, tag }: BlogCardProps) {
        Date: Thu, 23 Oct 2025 18:49:16 +0300 Subject: [PATCH 21/39] Show [Other Case Studies] in prod finally --- .../app/case-studies/more-stories-section/index.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/more-stories-section/index.tsx b/packages/web/docs/src/app/case-studies/more-stories-section/index.tsx index 7a4eb3c77ac..e83424b01a4 100644 --- a/packages/web/docs/src/app/case-studies/more-stories-section/index.tsx +++ b/packages/web/docs/src/app/case-studies/more-stories-section/index.tsx @@ -10,15 +10,7 @@ export async function MoreStoriesSection({ ...rest }: React.HTMLAttributes) { const [_meta, _indexPage, ...pageMap] = await getPageMap('/case-studies'); - let caseStudies = pageMap.filter(isCaseStudy).slice(0, 4); - - if (caseStudies.length < 4) { - if (process.env.NODE_ENV === 'development') { - caseStudies = [...caseStudies, ...caseStudies, ...caseStudies]; - } else { - return null; - } - } + const caseStudies = pageMap.filter(isCaseStudy).slice(0, 4); return (
        From 6f1c0c4ac161ce1c313ca89d9bf71176ace2261a Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 20:09:57 +0300 Subject: [PATCH 22/39] Apply changes from Notion --- .../app/case-studies/(posts)/toast/page.mdx | 263 ++++++++++-------- 1 file changed, 149 insertions(+), 114 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index e865a4837e6..dae58a13ef2 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -1,5 +1,5 @@ export const metadata = { - title: "How Toast's bet on Hive's GraphQL open source stack paid off at scale", + title: "How Toast's bet on Hive's GraphQL open source stack has paid off at scale", excerpt: "Toast's journey of migrating from Apollo to Hive to increased productivity, better support, long-term stability, cost reduction and no vendor lock-in.", category: 'Point of Sale', @@ -13,17 +13,15 @@ export const metadata = { ] } -import { DocsIcon, LargeCallout } from '#components/large-callout' import { Lede } from '#components/lede' -import { SmallAvatar } from '#components/small-avatar' -import { CallToAction, ContactButton, ComparisonTable as Table } from '@theguild/components' +import { ComparisonTable as Table } from '@theguild/components' -In this article, we’ll cover how Toast, the worldwide market leader in restaurant management software, which powers more than 148,000 restaurants across the US, Canada, the UK and Ireland, scaled their business so they could keep moving and shipping fast while growing to unprecedented scale. +In this article, we'll cover how Toast, the worldwide market leader in restaurant management software, which powers more than 148,000 restaurants across the US, Canada, the UK, and Ireland, scaled their business to keep moving and shipping fast while growing to an unprecedented scale. -Scaling to over 100 feature teams, 350 micro-frontends and 900 people in R&D, they keep shipping -fast using GraphQL Federation, fully managed by the Hive Platform. +Scaling to over 100 feature teams, 350 micro-frontends, and 900 people in R&D, they continue to ship +quickly using GraphQL Federation, fully managed by the Hive Platform. @@ -45,175 +43,227 @@ Toast adopted Hive’s open GraphQL Federation platform in phases: starting with schema registry, then introducing GraphQL Yoga and Hive Gateway. This allowed them to modernize their stack step by step, without disrupting ongoing development. -**Results** The move to Hive gave Toast a flexible and reliable foundation for scaling. Federation -now supports 350+ micro-frontends and 80 subgraphs, while teams continue to deliver features quickly -and safely. +### Results + +The move to Hive provided Toast a flexible and reliable foundation for scaling. Federation now +supports 350+ micro-frontends and 80 subgraphs, while teams continue to deliver features quickly and +safely. ## Choosing a schema registry that scales At the beginning of adopting federation, Toast compared the different options for a schema registry. - -The main options were Apollo Studio and Hive Console. +The main options were GraphOS/Apollo Studio and Hive Console. After extensive testing, Toast chose Hive Console: -1. Reliability – Hive Console proved to have much better registry uptimes than Apollo Studio -2. It had all the features they needed while being actively growing and developing in the open +1. Reliability – Hive Console proved to have significantly better registry uptime than Apollo Studio +2. It had all the features they needed while actively growing and being developed in the open 3. Fair and safe pricing that scales with their needs 4. No vendor-lock which gave them the option to individually choose the best pieces of their architecture 5. Open source, which made sure it was there for years to come (a bet that proved true) and also gave them the option to contribute features they cared a lot ([example](https://github.com/graphql-hive/console/pull/5616)) -6. [Security](https://vercel.com/security) and compliance were paramount for Toast. Hive’s +6. [Security](https://vercel.com/security) and compliance were paramount for Toast. Hive's infrastructure came with industry-standard security certifications, such as SOC2 Type2, with a perfect score, providing peace of mind regarding data protection and privacy. -7. Support - Toast engineers always have direct access and close collaborations with the actual - engineers that build the Hive Platform, through a shared Slack channel - not through intermediary +7. Support – Toast engineers always have direct access and close collaboration with the actual + engineers that build the Hive Platform, through a shared Slack channel – not through intermediary sales/support engineers ## Background Toast was founded in 2012 with a monolithic Android POS and web application with a single database. - To keep performing efficiently, Toast pivoted to micro-services, allowing teams to move fast independently. Today they have over 100 feature teams. For more details, [read here](https://technology.toasttab.com/entry/navigating-the-graphql-evolution-at-toast-from-bffs-to-federation/) the full story of how they successfully moved from REST to BFF to GraphQL to GraphQL Federation in -order to stay efficient at huge scale - with a strong focus on productivity for individual teams and +order to stay efficient at huge scale – with a strong focus on productivity for individual teams and clear separation. -That article also highlights the importance of a good schema registry to move fast safely. +That article also highlights the importance of a good schema registry to move quickly and safely. ## Gateway and subgraphs – Starting with Apollo, scaling with Hive -As they were adopting GraphQL Federation, they used Apollo’s gateway and subgraphs to do that. - -As they scaled GraphQL Federation across the organization and different teams, they saw some +In the early stages of adopting GraphQL Federation, they used Apollo's gateway and subgraphs. As +they scaled GraphQL Federation across the organization and different teams, they saw some shortcomings with their federation solution: -1. The implementations of Apollo Gateway and Apollo server weren’t well maintained, up to date, and +1. The implementations of Apollo Gateway and Apollo Server weren’t well maintained, up to date, or performant enough 2. Active support from core developers of the platform was lacking, including responses to feature requests and raised issues +From a business perspective, these limitations translated into: + +1. More stability issues – outdated components made the system harder to rely on at scale. +2. Higher compute usage – less efficient gateway performance resulted in unnecessary resource + consumption and increased infrastructure costs. +3. Slower issue resolution – lack of active support from core developers delayed fixes and responses + to feature requests, slowing down progress in production. +4. Longer response times – the overhead on Apollo Gateway led to slower app performance, directly + affecting user experience. +5. Lack of clarity about the project's future – uncertainty around its sustainability created a risk + of needing replacement. +6. Possible future issues – security updates and outdated or vulnerable dependencies. + ## Gradual migration path Thanks to Hive and The Guild’s open-source tooling, it was possible to gradually migrate the federated architecture, piece by piece, and only when necessary. For most companies, the first step is to migrate the schema registry and GraphQL Platform from -Apollo Studio to Hive Console. +Apollo Studio to Hive Console. The technical transition is a one-line change, and during the +evaluation period, The Guild provides companies with free credits so they can send information to +both platforms and compare, making sure the transition is safe first. As Hive Console supports any +gateway and router, including Apollo Gateway and Apollo Router, and also supports any subgraphs, +including Apollo Server, Toast was able to use Hive Console while keeping their existing +implementations. As Toast already chose Hive Console from the start, they were good to go and could +focus on the later phases of the migration when they actually felt the need. + +The second phase of the transition was to migrate from the unmaintained Apollo Server to GraphQL +Yoga server by The Guild, which +[outperforms Apollo Server in every single metric](https://the-guild.dev/graphql/yoga-server/docs/comparison). -The technical transition is a one line change, and during the evaluation period, The Guild provides -companies with free credits so they could send information to both platforms and compare, making -sure the transition is safe first. +The third phase was to migrate Apollo Gateway to Hive Gateway, which resulted in easier maintenance, +more flexibility and significantly greater performance and efficiency on Toast’s Gateway. That phase +can also be done gradually and in smaller chunks. -As Hive Console supports any gateway and router, including Apollo Gateway and Apollo Router, and -also supports any subgraphs, including Apollo Server, Toast was able to use Hive Console while -keeping their existing implementations. +Hive Gateway also provided Toast with access to all of Apollo's Paid Enterprise features for free, +without the need of plans or vendor lock like GraphQL Subscriptions, Defer and others. -As Toast already chose Hive Console from the start, they were good to go and could focus on the -later phases of the migration when they actually felt the need. +### GraphOS vs. Hive Features -Second phase of the transition was to migrate from the unmaintained Apollo Server to GraphQL Yoga -server by The Guild, which -[outperforms Apollo Server in every single metric](https://the-guild.dev/graphql/yoga-server/docs/comparison). +Paid Enterprise-Exclusive Features for Apollo users, that Hive offers for free: -Third phase was to migrate Apollo Gateway to Hive Gateway, which resulted in easier maintenance, -more flexibility and significantly greater performance and efficiency on Toast’s Gateway. That phase -can also be done gradually and in smaller chunks. +- **Unlimited Total Users:** Supports a limitless number of developers and consumers. +- **User Roles and Permissions:** Full, customizable control over user access of any size and any + level. +- **Contracts:** A governance feature allowing you to define filtered, public-facing views of your + private Supergraph. +- **Extensibility:** Enables running custom logic on the Hive Gateway for advanced use cases. +- **Telemetry:** Deep, custom observability data collection. +- **SSO & SAML:** Enterprise-grade Single Sign-On integration. +- **Business Support:** **24x7x365** technical support with the highest tier SLA (Service Level + Agreement). +- **Professional Services & Premium Support Packages:** Access to dedicated The Guild experts for + implementation and mission-critical systems. -Hive Gateway also provided Toast with access to all of Apollo’s Paid Enterprise features for free, -without the need for plans or vendor lock-in like GraphQL Subscriptions, Defer and others. +Things Apollo offers for free too, and we do too -## Contact us to learn how you can gradually migrate from Apollo to Hive’s open platform +- **Demand Control (Cost-based Limits):** Protects the graph by limiting expensive operations. +- **Operation-based Limits:** Sets limits on query depth, complexity, etc. +- **Request Authorization & JWT Authentication:** Built-in security and access control features at + the router level. +- **Traffic Shaping:** Features like deduplication and rate limiting. +- **APQ Caching** (often metered/add-on). +- **Entity Caching** (often metered/add-on). +- **Mesh Compose (compared to Apollo Connectors):** Tools for connecting to legacy REST/other data + sources. -Tell us about your current stack and we’ll make sure to give you our unbiased opinion on how to best -scale your platform using GraphQL. +## Scale beyond Apollo + +Share your stack and we'll chart your gradual migration path so you keep shipping while you scale ## The technical profile and journey of Toast In this section we’ll cover more technical details that might be interesting for any GraphQL developer to learn and get inspired by, for their own journey. -
        +
        - Number of teams + Number of teams over 100 feature teams - Number of technical people in the org + Number of technical people in the org Around 900 people in R&D - Structure of teams + Structure of teams - In general — domain horizontal full stack feature teams with a couple of flat focus teams + In general - domain-oriented horizontal full-stack feature teams with a couple of flat focus + teams - Apps, consumers and clients of the graph + Apps, consumers and clients of the graph - 350 micro frontends : Apollo Client + Codegen : Native mobile : Point for improvement — - Currently they are not utilizing fragment based co-location too much. : Next phase — AI - consumers of the graph + 350 micro frontends +
        + Apollo Client + Codegen +
        + Native mobile +
        + Point for improvement — Currently they are not utilizing fragment based co-location too + much. +
        + Next phase — AI consumers of the graph         - Number of subgraphs + Number of subgraphs 80 subgraphs - Gateway + Gateway - 2 gateways — one for client facing and one for restaurant admin — both using Hive Gateway : + 2 gateways – one client-facing and one for restaurant admin - both using Hive Gateway +
        Using Node 20         - Schema Registry + Schema Registry [Hive Console](https://the-guild.dev/graphql/hive) - Subgraphs stack - Kotlin with graphql-java — using GraphQL for all new functionality + Subgraphs stack + Kotlin with graphql-java - using GraphQL for all new functionality - Infrastructure + Infrastructure AWS - Auth implementation + Auth implementation — - Observability and tracing + Observability and tracing - Hive Insights and DataDog tracking : Looking into the new Hive Metrics features + Hive Insights and DataDog tracking +
        + Looking into the new Hive Metrics features         - Schema evolution process + Schema evolution process — - Local development process and tooling + Local development process and tooling - Toast created their own tool for efficient local development called “PrepStation” : The tool - deeply integrates with Hive Console, Storybook, GraphQL Codegen and Yoga Server to - seamlessly merge together local and remote subgraphs and composes them locally. : It also - creates a mocked local gateway instance and together. : Using this setup, feature teams can - prototype and work locally with upcoming versions of the graph, and create full prototypes - to stakeholders before production or backend teams need to do any work. : The Toast team - gave a [great + Toast developed their own tool for efficient local development called "PrepStation". + + The tool deeply integrates with Hive Console, Storybook, GraphQL Codegen and Yoga Server to + seamlessly merge local and remote subgraphs and compose them locally. + + It then takes the composed Supergraph and creates a mocked local gateway instance. + + Using this setup, feature teams can prototype and work locally with upcoming versions of the + graph, and create full prototypes to stakeholders before production or backend teams need to + do any work. + + The Toast team gave a [great talk](https://graphql.org/conf/2024/schedule/19cf965c68cfae3c7c19c6a9966bcadf/) about it at GraphQL Conf. +
        @@ -223,7 +273,7 @@ developer to learn and get inspired by, for their own journey. Toast had a long evolution to get to where they are today. Some of it was already discussed at the beginning of the article, but to expand a bit, they started with one big REST BFF, which grew into -30-40 REST BFFs. They first started GraphQL BFF at the guest side. It began with a SPA that had a +30-40 REST BFFs. They first introduced GraphQL BFF on the guest side. It began with a SPA that had a Node BFF written in GraphQL. Later, the restaurant admin side also discovered GraphQL, used the same structure and added 30–40 GraphQL BFFs — each team had their own REST API (Kotlin) with a Node GraphQL BFF on top. @@ -233,91 +283,76 @@ adopting Federation and the federated graph, still using the same model where ea their own REST API (Kotlin) and Node GraphQL BFF on top. Federation proved to be a great bet, growing rapidly into the company. Not only on the restaurant admin side, it was also extended to Guest side, all of them were using GraphQL Federation as their frontend API gateway, which helped -them to bring consistency within all their platforms, including ToastNow their native mobile -application – a high throughput, simpler auth solution. Also with the years, Toast also made -acquisitions which merged and federated together into the Supergraph. But as Federated GraphQL BFFs -grew by the numbers, that also led to logic creeping into the BFF layer. +them to bring consistency within all their platforms, including ToastNow, their native mobile +application – a high throughput, simpler auth solution. Over the years, Toast made acquisitions +which merged and federated together into the Supergraph. But as Federated GraphQL BFFs grew by the +numbers, that also led to logic creeping into the BFF layer. #### Current Architecture -So the next evolution was for the Kotlin side of the team to gradually remove REST, replace it with +The next evolution was for the Kotlin side of the team to gradually remove REST, replace it with GraphQL and directly federate into Hive Gateway, without the need of a Node GraphQL BFF in between. - This is the current architecture but as with all things, it is happening gradually, so there are -still some Node BFFs and when there is a new functionality being added, the Kotlin team would -gradually remove REST, move business logic from the Node BFF (that accumulated there for years) and -expose it all as GraphQL. +still some Node BFFs and when new functionality is added, the Kotlin teams gradually remove REST, +move business logic from the Node BFF (that accumulated there for years) and expose it all as +GraphQL. -So the current Hive Gateways federate a combination of Node GraphQL BFFs and Kotlin GraphQL -subgraphs which are all registered into Hive Console. +Today, the Hive Gateways federate a combination of Node GraphQL BFFs and Kotlin GraphQL subgraphs +which are all registered into Hive Console. ## Next steps for Toast and the Hive Platform team As the Toast GraphQL teams and The Guild are working closely together, we make sure to align our -roadmap with Toast’s needs. - -Here are some of their future plans: +roadmap with Toast's needs. Here are some of their future plans. ### Feedback on the new public API Since Hive released their new public API, a lot of integrations with internal systems at Toast could -be made much simpler. - -We are looking forward to seeing how they utilise the new API and if there are ways we can improve -it to make it easier for them. +be made much simpler. We are looking forward to seeing how they utilize the new API and if there are +ways we can improve it to make it easier for them. -One area we know we want a tighter integration is with their internal Backstage system. +One area where we know we want tighter integration is with their internal Backstage system. ### Usage reporting (OTEL, insights page, and errors) We recently introduced a new system for gathering and managing OTEL metrics on Hive for selected -customers. - -This also affects Hive’s current insights page, which uses the current agent and query schema -coordinates to show valuable data for customers. +customers. This also affects Hive's current insights page, which uses the current agent and query +schema coordinates to show valuable data for customers. As we design these new pages, we work closely with Toast to make sure we take their needs into -account on the new design. +account in the new design. ### New and improved alerting and webhooks system Based on the above features, we are currently in the process of redesigning our alerting and -webhooks system. - -There are a lot of options here so we work closely with Toast to make sure we are covering -everything they need in the best way possible. +webhooks system. There are a lot of options here, so we work closely with Toast to make sure we are +covering everything they need in the best way possible. ### Schema proposals Hive is close to shipping the first version of schema proposals to selected customers for feedback. - -Toast is excited to try it out and see how it would best fit and improve their current schema change +Toast is excited to try it out and see how it will best fit and improve their current schema change processes. ### Progressive override An important Federation feature that allows gradual migration of features from one subgraph to -another. - -As Toast is migrating types and fields from the current Node GraphQL BFFs to the Kotlin subgraphs, -this becomes important for them. +another. As Toast is migrating types and fields from the current Node GraphQL BFFs to the Kotlin +subgraphs, this becomes important for them. ### New laboratory rebuild -Hive is in the process of completely rebuilding our laboratory experience. - -We’ve hired a few people who built that experience on other platforms and are now bringing that -knowledge into a new, improved experience. +Hive is in the process of completely rebuilding our laboratory experience. We've hired a few people +who built that experience on other platforms and are now bringing that knowledge into a new, +improved experience. Toast gave us tons of valuable feedback and we hope to get an exciting new experience to them very soon. ### MCP and AI integrations and use cases -Toast is very forward-looking and already has tons of AI use cases, both internally and customer -facing ones. +Toast is very forward-looking and already has many AI use cases, both internal and customer-facing. We work hard to make sure they get everything they need for these use cases from their API layer. - That includes reviewing existing solutions, finding the missing points and supporting those in our platform. From 6e1ebd9dd6012a9fc0f547f2c0ab2ba7c847d25f Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 23 Oct 2025 22:01:25 +0300 Subject: [PATCH 23/39] improve styles --- .../docs/src/app/case-studies/(posts)/layout.tsx | 4 ++-- .../src/app/case-studies/(posts)/toast/page.mdx | 10 +++++----- .../src/app/case-studies/case-studies-header.tsx | 2 +- packages/web/docs/src/app/hive-prose-styles.css | 13 ++++++++++--- 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/layout.tsx b/packages/web/docs/src/app/case-studies/(posts)/layout.tsx index 1d75caf990b..156e03e4938 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/layout.tsx +++ b/packages/web/docs/src/app/case-studies/(posts)/layout.tsx @@ -16,10 +16,10 @@ export default function CaseStudiesLayout({ children }: { children: React.ReactN
        div:first-of-type>:first-child]:hidden')}> {children} - +
        - +
        ); } diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index dae58a13ef2..4e29727b99d 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -78,10 +78,10 @@ To keep performing efficiently, Toast pivoted to micro-services, allowing teams independently. Today they have over 100 feature teams. For more details, -[read here](https://technology.toasttab.com/entry/navigating-the-graphql-evolution-at-toast-from-bffs-to-federation/) -the full story of how they successfully moved from REST to BFF to GraphQL to GraphQL Federation in -order to stay efficient at huge scale – with a strong focus on productivity for individual teams and -clear separation. +[read the full story](https://technology.toasttab.com/entry/navigating-the-graphql-evolution-at-toast-from-bffs-to-federation/) +of how they successfully moved from REST to BFF to GraphQL to GraphQL Federation in order to stay +efficient at huge scale – with a strong focus on productivity for individual teams and clear +separation. That article also highlights the importance of a good schema registry to move quickly and safely. @@ -172,7 +172,7 @@ Share your stack and we'll chart your gradual migration path so you keep shippin In this section we’ll cover more technical details that might be interesting for any GraphQL developer to learn and get inspired by, for their own journey. - +
        Number of teams diff --git a/packages/web/docs/src/app/case-studies/case-studies-header.tsx b/packages/web/docs/src/app/case-studies/case-studies-header.tsx index c82ca542182..58b9b7fb92b 100644 --- a/packages/web/docs/src/app/case-studies/case-studies-header.tsx +++ b/packages/web/docs/src/app/case-studies/case-studies-header.tsx @@ -24,7 +24,7 @@ export function CaseStudiesHeader(props: React.HTMLAttributes) { {frontmatter.title} - + {logo} diff --git a/packages/web/docs/src/app/hive-prose-styles.css b/packages/web/docs/src/app/hive-prose-styles.css index 8c710eacf89..1fdec437e42 100644 --- a/packages/web/docs/src/app/hive-prose-styles.css +++ b/packages/web/docs/src/app/hive-prose-styles.css @@ -1,5 +1,4 @@ -.hive-prose, -.hive-prose article { +.hive-prose { --nextra-content-width: 1208px; --article-max-width: 640px; @@ -9,7 +8,11 @@ max-width: 100%; & > div { - @apply ml-0 pl-6 max-sm:pr-6 md:pl-12; + @apply ml-0 w-full !max-w-full pl-6 max-sm:pr-6 md:pl-12; + } + + & .case-studies-breakout { + @apply max-sm:-mx-6; } & > div > article { @@ -26,6 +29,10 @@ @apply text-green-1000 dark:text-white; + & article { + @apply text-green-1000 dark:text-white; + } + & article main > :is(h2, h3, h4, h5, h6, p, li) { @apply text-green-1000 dark:text-white; } From b49c8da69b37d1fe9f8b73a68659f61c544ec97a Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 24 Oct 2025 15:36:29 +0300 Subject: [PATCH 24/39] Add Scale Beyond card --- .../app/case-studies/(posts)/toast/page.mdx | 8 +-- .../docs/src/components/scale-beyond-card.tsx | 52 +++++++++++++++++++ 2 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 packages/web/docs/src/components/scale-beyond-card.tsx diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index 4e29727b99d..eb8c1c67400 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -13,9 +13,11 @@ export const metadata = { ] } -import { Lede } from '#components/lede' import { ComparisonTable as Table } from '@theguild/components' +import { Lede } from '#components/lede' +import { ScaleBeyondCard } from '#components/scale-beyond-card' + In this article, we'll cover how Toast, the worldwide market leader in restaurant management software, which powers more than 148,000 restaurants across the US, Canada, the UK, and Ireland, scaled their business to keep moving and shipping fast while growing to an unprecedented scale. @@ -163,9 +165,7 @@ Things Apollo offers for free too, and we do too - **Mesh Compose (compared to Apollo Connectors):** Tools for connecting to legacy REST/other data sources. -## Scale beyond Apollo - -Share your stack and we'll chart your gradual migration path so you keep shipping while you scale + ## The technical profile and journey of Toast diff --git a/packages/web/docs/src/components/scale-beyond-card.tsx b/packages/web/docs/src/components/scale-beyond-card.tsx new file mode 100644 index 00000000000..fb29bbdeeb9 --- /dev/null +++ b/packages/web/docs/src/components/scale-beyond-card.tsx @@ -0,0 +1,52 @@ +import clsx from 'clsx'; +import { ContactButton, DecorationIsolation, Heading } from '@theguild/components'; + +export function ScaleBeyondCard(props: React.HTMLAttributes) { + return ( +
        + + + Scale beyond Apollo + +
        +

        + Share your stack and we’ll chart your gradual migration path so you keep shipping while + you scale. +

        + Let's talk +
        +
        + ); +} + +function CardDecoration() { + return ( + + + + + + + + + + + + ); +} From 8e9d51a6f2d3eaa9f831d3c7fa9eb67dcf16cfdb Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 24 Oct 2025 16:01:03 +0300 Subject: [PATCH 25/39] use bullets --- .../app/case-studies/(posts)/toast/page.mdx | 40 +++++++------------ 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index eb8c1c67400..c5dca9838bd 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -172,7 +172,7 @@ Things Apollo offers for free too, and we do too In this section we’ll cover more technical details that might be interesting for any GraphQL developer to learn and get inspired by, for their own journey. -
        +
        Number of teams @@ -185,23 +185,19 @@ developer to learn and get inspired by, for their own journey. Structure of teams - In general - domain-oriented horizontal full-stack feature teams with a couple of flat focus + In general — domain-oriented horizontal full-stack feature teams with a couple of flat focus teams Apps, consumers and clients of the graph - 350 micro frontends -
        - Apollo Client + Codegen -
        - Native mobile -
        - Point for improvement — Currently they are not utilizing fragment based co-location too + - 350 micro frontends + - apollo Client + Codegen + - native mobile + - point for improvement — Currently they are not utilizing fragment based co-location too much. -
        - Next phase — AI consumers of the graph + - next phase — AI consumers of the graph         @@ -211,9 +207,8 @@ developer to learn and get inspired by, for their own journey. Gateway - 2 gateways – one client-facing and one for restaurant admin - both using Hive Gateway -
        - Using Node 20 + - 2 gateways — one client-facing and one for restaurant admin — both using Hive Gateway + - using Node 20         @@ -235,9 +230,8 @@ developer to learn and get inspired by, for their own journey. Observability and tracing - Hive Insights and DataDog tracking -
        - Looking into the new Hive Metrics features + - Hive Insights and DataDog tracking + - looking into the new Hive Metrics features         @@ -247,18 +241,14 @@ developer to learn and get inspired by, for their own journey. Local development process and tooling - Toast developed their own tool for efficient local development called "PrepStation". - - The tool deeply integrates with Hive Console, Storybook, GraphQL Codegen and Yoga Server to + Toast developed their own tool for efficient local development called "PrepStation". The tool deeply integrates with Hive Console, Storybook, GraphQL Codegen and Yoga Server to seamlessly merge local and remote subgraphs and compose them locally. - + It then takes the composed Supergraph and creates a mocked local gateway instance. - + Using this setup, feature teams can prototype and work locally with upcoming versions of the graph, and create full prototypes to stakeholders before production or backend teams need to - do any work. - - The Toast team gave a [great + do any work. The Toast team gave a [great talk](https://graphql.org/conf/2024/schedule/19cf965c68cfae3c7c19c6a9966bcadf/) about it at GraphQL Conf. From 6def96bce7cd48908f30c7569950953944177ca4 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 27 Oct 2025 20:15:34 +0200 Subject: [PATCH 26/39] Mirror changes from Notion --- .../app/case-studies/(posts)/toast/page.mdx | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index c5dca9838bd..a8c19b566e0 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -138,7 +138,7 @@ without the need of plans or vendor lock like GraphQL Subscriptions, Defer and o ### GraphOS vs. Hive Features -Paid Enterprise-Exclusive Features for Apollo users, that Hive offers for free: +Paid enterprise-exclusive features for Apollo users that Hive provides for free: - **Unlimited Total Users:** Supports a limitless number of developers and consumers. - **User Roles and Permissions:** Full, customizable control over user access of any size and any @@ -148,18 +148,15 @@ Paid Enterprise-Exclusive Features for Apollo users, that Hive offers for free: - **Extensibility:** Enables running custom logic on the Hive Gateway for advanced use cases. - **Telemetry:** Deep, custom observability data collection. - **SSO & SAML:** Enterprise-grade Single Sign-On integration. -- **Business Support:** **24x7x365** technical support with the highest tier SLA (Service Level - Agreement). -- **Professional Services & Premium Support Packages:** Access to dedicated The Guild experts for - implementation and mission-critical systems. +- **Business Support:** **24x7x365** technical support with top-tier SLAs (Service Level Agreements). +- **Professional Services & Premium Support Packages:** Access to dedicated The Guild experts for implementation and mission-critical systems. -Things Apollo offers for free too, and we do too +**Features Apollo offers for free – and Hive does too:** - **Demand Control (Cost-based Limits):** Protects the graph by limiting expensive operations. - **Operation-based Limits:** Sets limits on query depth, complexity, etc. -- **Request Authorization & JWT Authentication:** Built-in security and access control features at - the router level. -- **Traffic Shaping:** Features like deduplication and rate limiting. +- **Request Authorization & JWT Authentication:** Built-in security and access control features at the router level. +- **Traffic Shaping:** Features such as deduplication and rate limiting. - **APQ Caching** (often metered/add-on). - **Entity Caching** (often metered/add-on). - **Mesh Compose (compared to Apollo Connectors):** Tools for connecting to legacy REST/other data @@ -193,7 +190,7 @@ developer to learn and get inspired by, for their own journey. Apps, consumers and clients of the graph - 350 micro frontends - - apollo Client + Codegen + - Apollo Client + Codegen - native mobile - point for improvement — Currently they are not utilizing fragment based co-location too much. @@ -241,25 +238,20 @@ developer to learn and get inspired by, for their own journey. Local development process and tooling - Toast developed their own tool for efficient local development called "PrepStation". The tool deeply integrates with Hive Console, Storybook, GraphQL Codegen and Yoga Server to - seamlessly merge local and remote subgraphs and compose them locally. + Toast developed their own tool for efficient local development called "PrepStation". The tool deeply integrates with Hive Console, Storybook, GraphQL Codegen and Yoga Server to seamlessly merge local and remote subgraphs and compose them locally. It then takes the composed Supergraph and creates a mocked local gateway instance. - Using this setup, feature teams can prototype and work locally with upcoming versions of the - graph, and create full prototypes to stakeholders before production or backend teams need to - do any work. The Toast team gave a [great - talk](https://graphql.org/conf/2024/schedule/19cf965c68cfae3c7c19c6a9966bcadf/) about it at - GraphQL Conf. + Using this setup, feature teams can prototype and work locally with upcoming versions of the graph, and create full prototypes to stakeholders before production or backend teams need to do any work. The Toast team gave a [great talk](https://graphql.org/conf/2024/schedule/19cf965c68cfae3c7c19c6a9966bcadf/) about it at GraphQL Conf.
        -### How they got to this architecture +## How they got to this architecture -#### Initial Approach +### Initial Approach Toast had a long evolution to get to where they are today. Some of it was already discussed at the beginning of the article, but to expand a bit, they started with one big REST BFF, which grew into @@ -278,7 +270,7 @@ application – a high throughput, simpler auth solution. Over the years, Toast which merged and federated together into the Supergraph. But as Federated GraphQL BFFs grew by the numbers, that also led to logic creeping into the BFF layer. -#### Current Architecture +### Current Architecture The next evolution was for the Kotlin side of the team to gradually remove REST, replace it with GraphQL and directly federate into Hive Gateway, without the need of a Node GraphQL BFF in between. @@ -339,6 +331,16 @@ improved experience. Toast gave us tons of valuable feedback and we hope to get an exciting new experience to them very soon. +### New Hive Rust Router + +The Guild is working hard on [Hive Router](https://the-guild.dev/graphql/hive/blog/welcome-hive-router), their new GraphQL Federation Rust Router. + +It is already the [most correct](https://the-guild.dev/graphql/hive/federation-gateway-audit) and the [most performant](https://the-guild.dev/graphql/hive/federation-gateway-performance) router in the ecosystem. + +Toast is interested in trying it out, waiting the flexibility of Hive Gateway JS. + +An initial step would be to try the next upcoming version of Hive Gateway, which will include Hive Router’s Rust query planner and has great performance improvements while keeping the gateway in javascript still. + ### MCP and AI integrations and use cases Toast is very forward-looking and already has many AI use cases, both internal and customer-facing. @@ -346,3 +348,7 @@ Toast is very forward-looking and already has many AI use cases, both internal a We work hard to make sure they get everything they need for these use cases from their API layer. That includes reviewing existing solutions, finding the missing points and supporting those in our platform. + +## Conclusion + +Toast's experience highlights the value of open, flexible GraphQL tooling for companies scaling fast. Hive enabled them to modernize gradually, improve performance, and reduce costs while keeping development efficient. Looking ahead, both teams continue working closely to support new needs and ensure sustainable growth. From f097b26749d73bff4f3d0b028df3b7ecb45c1606 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 27 Oct 2025 21:09:34 +0200 Subject: [PATCH 27/39] Add flowcharts --- .../app/case-studies/(posts)/toast/page.mdx | 99 +++++++++++++++++-- packages/web/docs/src/mermaid.css | 12 +++ 2 files changed, 104 insertions(+), 7 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index a8c19b566e0..8a752f8dbe8 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -148,14 +148,17 @@ Paid enterprise-exclusive features for Apollo users that Hive provides for free: - **Extensibility:** Enables running custom logic on the Hive Gateway for advanced use cases. - **Telemetry:** Deep, custom observability data collection. - **SSO & SAML:** Enterprise-grade Single Sign-On integration. -- **Business Support:** **24x7x365** technical support with top-tier SLAs (Service Level Agreements). -- **Professional Services & Premium Support Packages:** Access to dedicated The Guild experts for implementation and mission-critical systems. +- **Business Support:** **24x7x365** technical support with top-tier SLAs (Service Level + Agreements). +- **Professional Services & Premium Support Packages:** Access to dedicated The Guild experts for + implementation and mission-critical systems. **Features Apollo offers for free – and Hive does too:** - **Demand Control (Cost-based Limits):** Protects the graph by limiting expensive operations. - **Operation-based Limits:** Sets limits on query depth, complexity, etc. -- **Request Authorization & JWT Authentication:** Built-in security and access control features at the router level. +- **Request Authorization & JWT Authentication:** Built-in security and access control features at + the router level. - **Traffic Shaping:** Features such as deduplication and rate limiting. - **APQ Caching** (often metered/add-on). - **Entity Caching** (often metered/add-on). @@ -260,6 +263,50 @@ Node BFF written in GraphQL. Later, the restaurant admin side also discovered Gr structure and added 30–40 GraphQL BFFs — each team had their own REST API (Kotlin) with a Node GraphQL BFF on top. +```mermaid +flowchart TB + subgraph Domains["Domain Services"] + reporting_rest["REPORTING API\nREST"] + takeout_rest["TAKEOUT & DELIVERY DOMAIN\nREST"] + menus_rest["MENUS\nREST"] + inventory_rest["INVENTORY\nREST"] + end + + subgraph BFFs["GraphQL BFFs"] + homepage_bff["HOMEPAGE BFF\nGraphQL"] + metrics_bff["PERFORMANCE METRICS\nGraphQL"] + takeout_bff["TAKEOUT & DELIVERY SETTINGS SPA\nGraphQL"] + menus_bff["MENUS\nGraphQL"] + end + + subgraph ToastWeb["Toast Web"] + homepage["HOMEPAGE"] + performance["PERFORMANCE CENTER"] + takeout_setup["TAKEOUT & DELIVERY SETUP"] + menus_app["MENUS"] + end + + homepage -- "GraphQL" --> homepage_bff + performance -- "GraphQL" --> metrics_bff + takeout_setup -- "GraphQL" --> takeout_bff + menus_app -- "GraphQL" --> menus_bff + + homepage_bff -- "REST" --> reporting_rest + homepage_bff -- "REST" --> takeout_rest + homepage_bff -- "REST" --> menus_rest + + metrics_bff -- "REST" --> reporting_rest + metrics_bff -- "REST" --> takeout_rest + metrics_bff -- "REST" --> menus_rest + + takeout_bff -- "REST" --> takeout_rest + takeout_bff -- "REST" --> menus_rest + takeout_bff -- "REST" --> inventory_rest + + menus_bff -- "REST" --> menus_rest + menus_bff -- "REST" --> inventory_rest +``` + As more teams, like the Mobile app, needed the same data from multiple BFFs, that led them into adopting Federation and the federated graph, still using the same model where each team feature had their own REST API (Kotlin) and Node GraphQL BFF on top. Federation proved to be a great bet, @@ -282,6 +329,35 @@ GraphQL. Today, the Hive Gateways federate a combination of Node GraphQL BFFs and Kotlin GraphQL subgraphs which are all registered into Hive Console. +```mermaid +flowchart TB + subgraph Subgraphs["GraphQL Subgraphs"] + reporting["REPORTING API\nGraphQL"] + takeout_domain["TAKEOUT & DELIVERY DOMAIN\nGraphQL"] + menus_service["MENUS\nGraphQL"] + inventory["INVENTORY\nGraphQL"] + end + + gateway["FEDERATED GATEWAY\nGraphQL"] + + subgraph ToastWeb["Toast Web"] + homepage["HOMEPAGE"] + performance_center["PERFORMANCE CENTER"] + takeout_setup["TAKEOUT & DELIVERY SETUP"] + menus_app["MENUS"] + end + + reporting -- "GraphQL" --> gateway + takeout_domain -- "GraphQL" --> gateway + menus_service -- "GraphQL" --> gateway + inventory -- "GraphQL" --> gateway + + gateway -- "GraphQL" --> homepage + gateway -- "GraphQL" --> performance_center + gateway -- "GraphQL" --> takeout_setup + gateway -- "GraphQL" --> menus_app +``` + ## Next steps for Toast and the Hive Platform team As the Toast GraphQL teams and The Guild are working closely together, we make sure to align our @@ -333,13 +409,19 @@ soon. ### New Hive Rust Router -The Guild is working hard on [Hive Router](https://the-guild.dev/graphql/hive/blog/welcome-hive-router), their new GraphQL Federation Rust Router. +The Guild is working hard on +[Hive Router](https://the-guild.dev/graphql/hive/blog/welcome-hive-router), their new GraphQL +Federation Rust Router. -It is already the [most correct](https://the-guild.dev/graphql/hive/federation-gateway-audit) and the [most performant](https://the-guild.dev/graphql/hive/federation-gateway-performance) router in the ecosystem. +It is already the [most correct](https://the-guild.dev/graphql/hive/federation-gateway-audit) and +the [most performant](https://the-guild.dev/graphql/hive/federation-gateway-performance) router in +the ecosystem. Toast is interested in trying it out, waiting the flexibility of Hive Gateway JS. -An initial step would be to try the next upcoming version of Hive Gateway, which will include Hive Router’s Rust query planner and has great performance improvements while keeping the gateway in javascript still. +An initial step would be to try the next upcoming version of Hive Gateway, which will include Hive +Router’s Rust query planner and has great performance improvements while keeping the gateway in +javascript still. ### MCP and AI integrations and use cases @@ -351,4 +433,7 @@ platform. ## Conclusion -Toast's experience highlights the value of open, flexible GraphQL tooling for companies scaling fast. Hive enabled them to modernize gradually, improve performance, and reduce costs while keeping development efficient. Looking ahead, both teams continue working closely to support new needs and ensure sustainable growth. +Toast's experience highlights the value of open, flexible GraphQL tooling for companies scaling +fast. Hive enabled them to modernize gradually, improve performance, and reduce costs while keeping +development efficient. Looking ahead, both teams continue working closely to support new needs and +ensure sustainable growth. diff --git a/packages/web/docs/src/mermaid.css b/packages/web/docs/src/mermaid.css index 35c8db9369e..b4eba3061d3 100644 --- a/packages/web/docs/src/mermaid.css +++ b/packages/web/docs/src/mermaid.css @@ -10,3 +10,15 @@ } } } + +.flowchart { + & .edgeLabel p { + background-color: rgb(var(--nextra-bg)) !important; + } + & .cluster rect { + @apply !fill-beige-100 dark:!fill-beige-800/5 !stroke-beige-300 dark:!stroke-beige-700/25; + } + & .node rect { + @apply dark:!fill-beige-700/10 !stroke-beige-300 dark:!stroke-beige-700/25 !fill-white; + } +} From e4f9fc95e14c2e562060df58fc2a7dc1be997837 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 27 Oct 2025 21:37:42 +0200 Subject: [PATCH 28/39] Simplify the flowchart --- .../web/docs/src/app/case-studies/(posts)/toast/page.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index 8a752f8dbe8..7db47e3e351 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -266,10 +266,10 @@ GraphQL BFF on top. ```mermaid flowchart TB subgraph Domains["Domain Services"] - reporting_rest["REPORTING API\nREST"] - takeout_rest["TAKEOUT & DELIVERY DOMAIN\nREST"] - menus_rest["MENUS\nREST"] - inventory_rest["INVENTORY\nREST"] + reporting_rest["REPORTING API"] + takeout_rest["TAKEOUT & DELIVERY DOMAIN"] + menus_rest["MENUS"] + inventory_rest["INVENTORY"] end subgraph BFFs["GraphQL BFFs"] From e4c07e0ee24049dd27d6c1508bf63fb4d425c4e8 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 27 Oct 2025 21:38:27 +0200 Subject: [PATCH 29/39] Simplify the flowcharts --- .../app/case-studies/(posts)/toast/page.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index 7db47e3e351..c701fe6f3ac 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -273,10 +273,10 @@ flowchart TB end subgraph BFFs["GraphQL BFFs"] - homepage_bff["HOMEPAGE BFF\nGraphQL"] - metrics_bff["PERFORMANCE METRICS\nGraphQL"] - takeout_bff["TAKEOUT & DELIVERY SETTINGS SPA\nGraphQL"] - menus_bff["MENUS\nGraphQL"] + homepage_bff["HOMEPAGE BFF"] + metrics_bff["PERFORMANCE METRICS"] + takeout_bff["TAKEOUT & DELIVERY SETTINGS SPA"] + menus_bff["MENUS"] end subgraph ToastWeb["Toast Web"] @@ -332,13 +332,13 @@ which are all registered into Hive Console. ```mermaid flowchart TB subgraph Subgraphs["GraphQL Subgraphs"] - reporting["REPORTING API\nGraphQL"] - takeout_domain["TAKEOUT & DELIVERY DOMAIN\nGraphQL"] - menus_service["MENUS\nGraphQL"] - inventory["INVENTORY\nGraphQL"] + reporting["REPORTING API"] + takeout_domain["TAKEOUT & DELIVERY DOMAIN"] + menus_service["MENUS"] + inventory["INVENTORY"] end - gateway["FEDERATED GATEWAY\nGraphQL"] + gateway["FEDERATED GATEWAY"] subgraph ToastWeb["Toast Web"] homepage["HOMEPAGE"] From f1a1c998a5a004f56ee1791ee1804d63216a5eda Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 27 Oct 2025 21:55:22 +0200 Subject: [PATCH 30/39] Update Mermaid charts --- .../app/case-studies/(posts)/toast/page.mdx | 48 ++++++++----------- packages/web/docs/src/mermaid.css | 4 +- 2 files changed, 23 insertions(+), 29 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index c701fe6f3ac..2dcc019e03f 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -265,25 +265,21 @@ GraphQL BFF on top. ```mermaid flowchart TB - subgraph Domains["Domain Services"] - reporting_rest["REPORTING API"] - takeout_rest["TAKEOUT & DELIVERY DOMAIN"] - menus_rest["MENUS"] - inventory_rest["INVENTORY"] - end + reporting_rest["Reporting API"] + takeout_rest["Takeout & Delivery Domain"] + menus_rest["Menus"] + inventory_rest["Inventory"] - subgraph BFFs["GraphQL BFFs"] - homepage_bff["HOMEPAGE BFF"] - metrics_bff["PERFORMANCE METRICS"] - takeout_bff["TAKEOUT & DELIVERY SETTINGS SPA"] - menus_bff["MENUS"] - end + homepage_bff["Homepage BFF"] + metrics_bff["Performance Metrics"] + takeout_bff["Takeout & Delivery Settings SPA"] + menus_bff["Menus"] subgraph ToastWeb["Toast Web"] - homepage["HOMEPAGE"] - performance["PERFORMANCE CENTER"] - takeout_setup["TAKEOUT & DELIVERY SETUP"] - menus_app["MENUS"] + homepage["Homepage"] + performance["Performance Center"] + takeout_setup["Takeout & Delivery Setup"] + menus_app["Menus"] end homepage -- "GraphQL" --> homepage_bff @@ -331,20 +327,18 @@ which are all registered into Hive Console. ```mermaid flowchart TB - subgraph Subgraphs["GraphQL Subgraphs"] - reporting["REPORTING API"] - takeout_domain["TAKEOUT & DELIVERY DOMAIN"] - menus_service["MENUS"] - inventory["INVENTORY"] - end + reporting["Reporting API"] + takeout_domain["Takeout & Delivery Domain"] + menus_service["Menus"] + inventory["Inventory"] - gateway["FEDERATED GATEWAY"] + gateway["Federated Gateway"] subgraph ToastWeb["Toast Web"] - homepage["HOMEPAGE"] - performance_center["PERFORMANCE CENTER"] - takeout_setup["TAKEOUT & DELIVERY SETUP"] - menus_app["MENUS"] + homepage["Homepage"] + performance_center["Performance Center"] + takeout_setup["Takeout & Delivery Setup"] + menus_app["Menus"] end reporting -- "GraphQL" --> gateway diff --git a/packages/web/docs/src/mermaid.css b/packages/web/docs/src/mermaid.css index b4eba3061d3..ff70fd0fc94 100644 --- a/packages/web/docs/src/mermaid.css +++ b/packages/web/docs/src/mermaid.css @@ -16,9 +16,9 @@ background-color: rgb(var(--nextra-bg)) !important; } & .cluster rect { - @apply !fill-beige-100 dark:!fill-beige-800/5 !stroke-beige-300 dark:!stroke-beige-700/25; + @apply dark:!fill-beige-800/5 !stroke-beige-300 dark:!stroke-beige-700/25 !fill-blue-300; } & .node rect { - @apply dark:!fill-beige-700/10 !stroke-beige-300 dark:!stroke-beige-700/25 !fill-white; + @apply dark:!fill-beige-700/10 dark:!stroke-beige-700/25 !fill-blue-100 !stroke-transparent; } } From 230e6568dd28f7bd7c440908603ad03b70db793b Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 28 Oct 2025 13:33:38 +0200 Subject: [PATCH 31/39] Add architecture diagram --- .../(posts)/toast/architecture-diagram.svg | 285 ++++++++++++++++++ .../app/case-studies/(posts)/toast/page.mdx | 7 + 2 files changed, 292 insertions(+) create mode 100644 packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg b/packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg new file mode 100644 index 00000000000..b7630a5e262 --- /dev/null +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg @@ -0,0 +1,285 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index 2dcc019e03f..1d55a6752d5 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -13,11 +13,14 @@ export const metadata = { ] } +import Image from 'next/image' import { ComparisonTable as Table } from '@theguild/components' import { Lede } from '#components/lede' import { ScaleBeyondCard } from '#components/scale-beyond-card' +import architectureDiagramSvg from './architecture-diagram.svg' + In this article, we'll cover how Toast, the worldwide market leader in restaurant management software, which powers more than 148,000 restaurants across the US, Canada, the UK, and Ireland, scaled their business to keep moving and shipping fast while growing to an unprecedented scale. @@ -51,6 +54,10 @@ The move to Hive provided Toast a flexible and reliable foundation for scaling. supports 350+ micro-frontends and 80 subgraphs, while teams continue to deliver features quickly and safely. +
        + +
        + ## Choosing a schema registry that scales At the beginning of adopting federation, Toast compared the different options for a schema registry. From 5c03c4b3f96dc5a7a5862f6fa4e447f089867ab1 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 28 Oct 2025 16:35:52 +0200 Subject: [PATCH 32/39] Use a larger architecture diagram --- .../(posts)/toast/architecture-diagram.svg | 1277 +++++++++++++---- .../app/case-studies/(posts)/toast/page.mdx | 4 +- 2 files changed, 1007 insertions(+), 274 deletions(-) diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg b/packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg index b7630a5e262..6abf59c117d 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/architecture-diagram.svg @@ -1,285 +1,1018 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + - - + + - - + + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index 1d55a6752d5..94b3fb61163 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -54,8 +54,8 @@ The move to Hive provided Toast a flexible and reliable foundation for scaling. supports 350+ micro-frontends and 80 subgraphs, while teams continue to deliver features quickly and safely. -
        - +
        +
        ## Choosing a schema registry that scales From b60fbbb161ee709b1bd5a42907ef4027f2aed480 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 28 Oct 2025 17:05:13 +0200 Subject: [PATCH 33/39] Fix a typo --- .../app/blog/(posts)/graphql-request-cancellation/page.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/docs/src/app/blog/(posts)/graphql-request-cancellation/page.mdx b/packages/web/docs/src/app/blog/(posts)/graphql-request-cancellation/page.mdx index 6834f26f12e..32677c5fa48 100644 --- a/packages/web/docs/src/app/blog/(posts)/graphql-request-cancellation/page.mdx +++ b/packages/web/docs/src/app/blog/(posts)/graphql-request-cancellation/page.mdx @@ -176,7 +176,7 @@ flowchart id31["Load total post likes (Post.likeCount)"] id32["Load comments for each post (Post.comments)"] id4["Load author for each comments (Comment.author)"] - id5["Load author avataer for each comment author (User.avatar)"] + id5["Load author avatar for each comment author (User.avatar)"] id1 --> id21 id1 --> id22 @@ -199,7 +199,7 @@ flowchart id31["Load total post likes (Post.likeCount)"] id32["Load comments for each post (Post.comments)"] id4["Load author for each comments (Comment.author)"] - id5["Load author avataer for each comment author (User.avatar)"] + id5["Load author avatar for each comment author (User.avatar)"] id1 --> id21 id1 --> id22 From 62e71e89f26f52c933913b9c2089863b72d8e53d Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 28 Oct 2025 17:05:25 +0200 Subject: [PATCH 34/39] Copy prettier script so it can be launched from a nested dir --- packages/web/docs/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/docs/package.json b/packages/web/docs/package.json index 242ce903e0f..6458812af06 100644 --- a/packages/web/docs/package.json +++ b/packages/web/docs/package.json @@ -9,6 +9,7 @@ "build": "next build && next-sitemap", "dev": "next --turbopack", "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind", + "prettier": "prettier --cache --write --list-different --ignore-unknown src", "validate-mdx-links": "pnpx validate-mdx-links@1.1.0 --files 'src/**/*.mdx'" }, "dependencies": { From 4807afbb754be15fc47f828113eba5bcbecedb46 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 28 Oct 2025 17:26:20 +0200 Subject: [PATCH 35/39] Make the docs sidebar wider --- packages/web/docs/src/app/global.css | 16 ++++++++++++++++ packages/web/docs/src/app/layout.tsx | 1 + 2 files changed, 17 insertions(+) create mode 100644 packages/web/docs/src/app/global.css diff --git a/packages/web/docs/src/app/global.css b/packages/web/docs/src/app/global.css new file mode 100644 index 00000000000..5cfd68ca146 --- /dev/null +++ b/packages/web/docs/src/app/global.css @@ -0,0 +1,16 @@ +.nextra-sidebar.nextra-sidebar { + width: 300px; + + & ul { + padding-left: 4px; + margin-left: 9px; + + & .x\:text-gray-500 { + @apply text-gray-700 dark:text-neutral-300; + } + } +} + +article.x\:min-h-\[calc\(100vh-var\(--nextra-navbar-height\)\)\] { + @apply md:pl-6 md:pr-8; +} diff --git a/packages/web/docs/src/app/layout.tsx b/packages/web/docs/src/app/layout.tsx index 8c9e079fced..fb64100bfc8 100644 --- a/packages/web/docs/src/app/layout.tsx +++ b/packages/web/docs/src/app/layout.tsx @@ -20,6 +20,7 @@ import '../selection-styles.css'; import '../easing-functions.css'; import '../mermaid.css'; import { NarrowPages } from './narrow-pages'; +import './global.css'; export const metadata = getDefaultMetadata({ productName: PRODUCTS.HIVE.name, From 2deffc49aaeef1644ff46ad2be81d328e347e39f Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 28 Oct 2025 17:26:31 +0200 Subject: [PATCH 36/39] Center blog again --- packages/web/docs/src/app/hive-prose-styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/docs/src/app/hive-prose-styles.css b/packages/web/docs/src/app/hive-prose-styles.css index 1fdec437e42..3486a0707e5 100644 --- a/packages/web/docs/src/app/hive-prose-styles.css +++ b/packages/web/docs/src/app/hive-prose-styles.css @@ -19,6 +19,7 @@ box-sizing: content-box; max-width: 100%; width: var(--article-max-width); + margin-inline: auto; padding: 0; } From c4536ad4a41ee2dda985da6499fcc670078fd7b9 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 28 Oct 2025 19:48:42 +0200 Subject: [PATCH 37/39] Add @next/bundle-analyzer --- packages/web/docs/next.config.js | 9 ++++- packages/web/docs/package.json | 2 ++ pnpm-lock.yaml | 56 ++++++++++++++++++++------------ 3 files changed, 46 insertions(+), 21 deletions(-) diff --git a/packages/web/docs/next.config.js b/packages/web/docs/next.config.js index fdaeac5245f..7bce85fafe5 100644 --- a/packages/web/docs/next.config.js +++ b/packages/web/docs/next.config.js @@ -1,6 +1,7 @@ +import withBundleAnalyzer from '@next/bundle-analyzer'; import { withGuildDocs } from '@theguild/components/next.config'; -export default withGuildDocs({ +let config = withGuildDocs({ output: 'export', eslint: { ignoreDuringBuilds: true, @@ -334,3 +335,9 @@ export default withGuildDocs({ return config; }, }); + +if (process.env.ANALYZE === 'true') { + config = withBundleAnalyzer({ enabled: true })(config); +} + +export default config; diff --git a/packages/web/docs/package.json b/packages/web/docs/package.json index 6458812af06..5d277048809 100644 --- a/packages/web/docs/package.json +++ b/packages/web/docs/package.json @@ -7,6 +7,7 @@ }, "scripts": { "build": "next build && next-sitemap", + "build:analyze": "ANALYZE=true next build", "dev": "next --turbopack", "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind", "prettier": "prettier --cache --write --list-different --ignore-unknown src", @@ -33,6 +34,7 @@ }, "devDependencies": { "@mdx-js/typescript-plugin": "^0.0.8", + "@next/bundle-analyzer": "^16.0.0", "@tailwindcss/typography": "0.5.16", "@theguild/tailwind-config": "0.6.3", "@types/react": "18.3.18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b90987eea5b..d369a2e0f5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -220,7 +220,7 @@ importers: version: 5.7.3 vite-tsconfig-paths: specifier: 5.1.4 - version: 5.1.4(typescript@5.7.3)(vite@7.1.5(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0)) + version: 5.1.4(typescript@5.7.3)(vite@6.3.5(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0)) vitest: specifier: 3.2.4 version: 3.2.4(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0) @@ -1427,7 +1427,7 @@ importers: devDependencies: '@graphql-inspector/core': specifier: 5.1.0-alpha-20231208113249-34700c8a - version: 5.1.0-alpha-20231208113249-34700c8a(graphql@16.11.0) + version: 5.1.0-alpha-20231208113249-34700c8a(graphql@16.9.0) '@hive/service-common': specifier: workspace:* version: link:../service-common @@ -2143,6 +2143,9 @@ importers: '@mdx-js/typescript-plugin': specifier: ^0.0.8 version: 0.0.8 + '@next/bundle-analyzer': + specifier: ^16.0.0 + version: 16.0.0 '@tailwindcss/typography': specifier: 0.5.16 version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.10.5)(typescript@5.7.3))) @@ -3666,7 +3669,6 @@ packages: '@fastify/vite@6.0.7': resolution: {integrity: sha512-+dRo9KUkvmbqdmBskG02SwigWl06Mwkw8SBDK1zTNH6vd4DyXbRvI7RmJEmBkLouSU81KTzy1+OzwHSffqSD6w==} - bundledDependencies: [] '@floating-ui/core@1.2.6': resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==} @@ -5062,6 +5064,9 @@ packages: '@next/bundle-analyzer@15.1.5': resolution: {integrity: sha512-pCYMPgGRwf+FjEwUXFo3QF14VzBSPPsBHSFuXUpq5ifKcY8LbcmoF2xMVVMa2HoYgA1XuqPSAIfLJr4YXNa9xQ==} + '@next/bundle-analyzer@16.0.0': + resolution: {integrity: sha512-OYufQoNm/Im2fYQBdXu9fqUrXaP3lPuPnryW0XNGG7kJiGxH/VWS8zc2/x4aW2LQGn+opqIJYNRXy7k5qV/09g==} + '@next/env@13.5.6': resolution: {integrity: sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==} @@ -17607,8 +17612,8 @@ snapshots: dependencies: '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sso-oidc': 3.596.0 - '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0) + '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0) + '@aws-sdk/client-sts': 3.596.0 '@aws-sdk/core': 3.592.0 '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0) '@aws-sdk/middleware-host-header': 3.577.0 @@ -17715,11 +17720,11 @@ snapshots: transitivePeerDependencies: - aws-crt - '@aws-sdk/client-sso-oidc@3.596.0': + '@aws-sdk/client-sso-oidc@3.596.0(@aws-sdk/client-sts@3.596.0)': dependencies: '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0) + '@aws-sdk/client-sts': 3.596.0 '@aws-sdk/core': 3.592.0 '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0) '@aws-sdk/middleware-host-header': 3.577.0 @@ -17758,6 +17763,7 @@ snapshots: '@smithy/util-utf8': 3.0.0 tslib: 2.8.1 transitivePeerDependencies: + - '@aws-sdk/client-sts' - aws-crt '@aws-sdk/client-sso-oidc@3.723.0(@aws-sdk/client-sts@3.723.0)': @@ -17891,11 +17897,11 @@ snapshots: transitivePeerDependencies: - aws-crt - '@aws-sdk/client-sts@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)': + '@aws-sdk/client-sts@3.596.0': dependencies: '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sso-oidc': 3.596.0 + '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0) '@aws-sdk/core': 3.592.0 '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0) '@aws-sdk/middleware-host-header': 3.577.0 @@ -17934,7 +17940,6 @@ snapshots: '@smithy/util-utf8': 3.0.0 tslib: 2.8.1 transitivePeerDependencies: - - '@aws-sdk/client-sso-oidc' - aws-crt '@aws-sdk/client-sts@3.723.0': @@ -18048,7 +18053,7 @@ snapshots: '@aws-sdk/credential-provider-ini@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)': dependencies: - '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0) + '@aws-sdk/client-sts': 3.596.0 '@aws-sdk/credential-provider-env': 3.587.0 '@aws-sdk/credential-provider-http': 3.596.0 '@aws-sdk/credential-provider-process': 3.587.0 @@ -18167,7 +18172,7 @@ snapshots: '@aws-sdk/credential-provider-web-identity@3.587.0(@aws-sdk/client-sts@3.596.0)': dependencies: - '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0) + '@aws-sdk/client-sts': 3.596.0 '@aws-sdk/types': 3.577.0 '@smithy/property-provider': 3.1.11 '@smithy/types': 3.7.2 @@ -18342,7 +18347,7 @@ snapshots: '@aws-sdk/token-providers@3.587.0(@aws-sdk/client-sso-oidc@3.596.0)': dependencies: - '@aws-sdk/client-sso-oidc': 3.596.0 + '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0) '@aws-sdk/types': 3.577.0 '@smithy/property-provider': 3.1.11 '@smithy/shared-ini-file-loader': 3.1.12 @@ -19974,13 +19979,6 @@ snapshots: object-inspect: 1.12.3 tslib: 2.6.2 - '@graphql-inspector/core@5.1.0-alpha-20231208113249-34700c8a(graphql@16.11.0)': - dependencies: - dependency-graph: 0.11.0 - graphql: 16.11.0 - object-inspect: 1.12.3 - tslib: 2.6.2 - '@graphql-inspector/core@5.1.0-alpha-20231208113249-34700c8a(graphql@16.9.0)': dependencies: dependency-graph: 0.11.0 @@ -21554,6 +21552,13 @@ snapshots: - bufferutil - utf-8-validate + '@next/bundle-analyzer@16.0.0': + dependencies: + webpack-bundle-analyzer: 4.10.1 + transitivePeerDependencies: + - bufferutil + - utf-8-validate + '@next/env@13.5.6': {} '@next/env@15.5.3': {} @@ -36115,6 +36120,17 @@ snapshots: - tsx - yaml + vite-tsconfig-paths@5.1.4(typescript@5.7.3)(vite@6.3.5(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0)): + dependencies: + debug: 4.3.7(supports-color@8.1.1) + globrex: 0.1.2 + tsconfck: 3.0.3(typescript@5.7.3) + optionalDependencies: + vite: 6.3.5(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0) + transitivePeerDependencies: + - supports-color + - typescript + vite-tsconfig-paths@5.1.4(typescript@5.7.3)(vite@7.1.5(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0)): dependencies: debug: 4.3.7(supports-color@8.1.1) From 32bb2d5dd9791fa6e73c5ef56d485d787e1cc4e1 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 29 Oct 2025 00:18:08 +0100 Subject: [PATCH 38/39] Fix prose styles --- packages/web/docs/src/app/hive-prose-styles.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/web/docs/src/app/hive-prose-styles.css b/packages/web/docs/src/app/hive-prose-styles.css index 3486a0707e5..3383ec00d58 100644 --- a/packages/web/docs/src/app/hive-prose-styles.css +++ b/packages/web/docs/src/app/hive-prose-styles.css @@ -4,8 +4,7 @@ & > .main-content { box-sizing: content-box; - width: var(--nextra-content-width); - max-width: 100%; + max-width: min(100%, var(--nextra-content-width)); & > div { @apply ml-0 w-full !max-w-full pl-6 max-sm:pr-6 md:pl-12; @@ -19,7 +18,6 @@ box-sizing: content-box; max-width: 100%; width: var(--article-max-width); - margin-inline: auto; padding: 0; } From f3d74c8db47ba2f1763c6e416cc9a4ba602e7e97 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 29 Oct 2025 00:25:39 +0100 Subject: [PATCH 39/39] Add the new diagrams to Toast case study --- .../(posts)/toast/after-diagram.svg | 239 +++++++++++ .../(posts)/toast/before-diagram.svg | 379 ++++++++++++++++++ .../app/case-studies/(posts)/toast/page.mdx | 81 +--- 3 files changed, 630 insertions(+), 69 deletions(-) create mode 100644 packages/web/docs/src/app/case-studies/(posts)/toast/after-diagram.svg create mode 100644 packages/web/docs/src/app/case-studies/(posts)/toast/before-diagram.svg diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/after-diagram.svg b/packages/web/docs/src/app/case-studies/(posts)/toast/after-diagram.svg new file mode 100644 index 00000000000..3d7897fd03d --- /dev/null +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/after-diagram.svg @@ -0,0 +1,239 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/before-diagram.svg b/packages/web/docs/src/app/case-studies/(posts)/toast/before-diagram.svg new file mode 100644 index 00000000000..0840ba6af6a --- /dev/null +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/before-diagram.svg @@ -0,0 +1,379 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx index 94b3fb61163..15198180aa2 100644 --- a/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx +++ b/packages/web/docs/src/app/case-studies/(posts)/toast/page.mdx @@ -19,7 +19,15 @@ import { ComparisonTable as Table } from '@theguild/components' import { Lede } from '#components/lede' import { ScaleBeyondCard } from '#components/scale-beyond-card' -import architectureDiagramSvg from './architecture-diagram.svg' +import afterDiagram from './after-diagram.svg' +import architectureDiagram from './architecture-diagram.svg' +import beforeDiagram from './before-diagram.svg' + +export const Diagram = ({ src }) => ( +
        + +
        +) @@ -54,9 +62,7 @@ The move to Hive provided Toast a flexible and reliable foundation for scaling. supports 350+ micro-frontends and 80 subgraphs, while teams continue to deliver features quickly and safely. -
        - -
        + ## Choosing a schema registry that scales @@ -270,45 +276,7 @@ Node BFF written in GraphQL. Later, the restaurant admin side also discovered Gr structure and added 30–40 GraphQL BFFs — each team had their own REST API (Kotlin) with a Node GraphQL BFF on top. -```mermaid -flowchart TB - reporting_rest["Reporting API"] - takeout_rest["Takeout & Delivery Domain"] - menus_rest["Menus"] - inventory_rest["Inventory"] - - homepage_bff["Homepage BFF"] - metrics_bff["Performance Metrics"] - takeout_bff["Takeout & Delivery Settings SPA"] - menus_bff["Menus"] - - subgraph ToastWeb["Toast Web"] - homepage["Homepage"] - performance["Performance Center"] - takeout_setup["Takeout & Delivery Setup"] - menus_app["Menus"] - end - - homepage -- "GraphQL" --> homepage_bff - performance -- "GraphQL" --> metrics_bff - takeout_setup -- "GraphQL" --> takeout_bff - menus_app -- "GraphQL" --> menus_bff - - homepage_bff -- "REST" --> reporting_rest - homepage_bff -- "REST" --> takeout_rest - homepage_bff -- "REST" --> menus_rest - - metrics_bff -- "REST" --> reporting_rest - metrics_bff -- "REST" --> takeout_rest - metrics_bff -- "REST" --> menus_rest - - takeout_bff -- "REST" --> takeout_rest - takeout_bff -- "REST" --> menus_rest - takeout_bff -- "REST" --> inventory_rest - - menus_bff -- "REST" --> menus_rest - menus_bff -- "REST" --> inventory_rest -``` + As more teams, like the Mobile app, needed the same data from multiple BFFs, that led them into adopting Federation and the federated graph, still using the same model where each team feature had @@ -332,32 +300,7 @@ GraphQL. Today, the Hive Gateways federate a combination of Node GraphQL BFFs and Kotlin GraphQL subgraphs which are all registered into Hive Console. -```mermaid -flowchart TB - reporting["Reporting API"] - takeout_domain["Takeout & Delivery Domain"] - menus_service["Menus"] - inventory["Inventory"] - - gateway["Federated Gateway"] - - subgraph ToastWeb["Toast Web"] - homepage["Homepage"] - performance_center["Performance Center"] - takeout_setup["Takeout & Delivery Setup"] - menus_app["Menus"] - end - - reporting -- "GraphQL" --> gateway - takeout_domain -- "GraphQL" --> gateway - menus_service -- "GraphQL" --> gateway - inventory -- "GraphQL" --> gateway - - gateway -- "GraphQL" --> homepage - gateway -- "GraphQL" --> performance_center - gateway -- "GraphQL" --> takeout_setup - gateway -- "GraphQL" --> menus_app -``` + ## Next steps for Toast and the Hive Platform team