The enterprise data layer forNext.js
End-to-end typesafe data fetching for frontend teams at scale
Ship faster by empowering frontend teams to shape data to meet their needs, all with Fuse.js, the best way to build a data layer.
Why a data layer?
Ship fast at scale
There is a fundamental misalignment of needs in engineering teams: Backend teams expose resource-based APIs, but frontend teams need data shaped based on user needs.
Most companies at scale today try to have backend engineers collaborate with frontend teams to expose data in the way the clients need it, but that is a painfully slow process with much overhead.
Instead, the fastest moving companies at scale have a central data layer that gives frontend teams a central place to transform all the resource-based microservice- & third-party APIs into the shape they need.
What's Fuse.js?
The best way to build a data layer
Fuse is the best of the GraphQL ecosystem combined into one with a developer experience for Next.js
Why GraphQL?
Optimal data fetching out of the box
- Every page is optimized into a single network request thanks to component-defined data requirements
- That's exactly how GraphQL works if you can set it up correctly, which we have learned very few companies can.
- Fuse is powered by the best of the GraphQL ecosystem — but you don't need to be familiar with these specific libraries.
Powered by
Pothos
The schema builder for creating GraphQL schemas in typescript using a strongly typed code first approach.
URQL
Highly customizable and versatile GraphQL client, made to grow with your codebase.
GraphQL Yoga
The fully-featured GraphQL Server with focus on easy setup, performance and great developer experience.
Fuse.js's principles
Incrementally Adoptable
You can start using Fuse.js for just one microservice or one third-party API or even just one part of a microservice to try it out and go from there.
Pit of success at scale
You can start using Fuse.js for just one microservice or one third-party API or even just one part of a microservice to try it out and go from there.
Great developer experience
End-to-end type safe. Fully documented & autocompleted data fetching.
Get Started
Try it in two minutes
When the current structure of backend APIs doesn't align with your frontend’s data shape needs, productivity slows down.
- 1Step 1
Install the npm package
npm install --save fuse graphql npm install --save-dev @graphql-typed-document-node/core
- 2Step 2
Add the Next.js plugin to your `next.config.js`
const { nextFusePlugin } = require('fuse/next/plugin') /** @type {import('next').NextConfig} */ const nextConfig = nextFusePlugin()({ // Your Next.js config here }) module.exports = nextConfig
- 3Step 3
Create the /api/fuse API route
This API route will serve as the entrypoint to the GraphQL API that Fuse.js creates. If you are using Next.js's app router, add a file at app/api/fuse/route.ts and copy the below code to it:
import { createAPIRouteHandler } from 'fuse/next' // NOTE: This makes Fuse.js automatically pick up every type in the /types folder // Alternatively, you can manually import each type in the /types folder and remove this snippet // @ts-expect-error const files = require.context('../../../types', true, /\.ts$/) files .keys() .filter((path: string) => path.includes('types/')) .forEach(files) const handler = createAPIRouteHandler() export const GET = handler export const POST = handler
That's it! Fuse.js will now serve a GraphQL API at /api/fuse and automatically generated a GraphQL query for user(id: ID!).
Who is behind Fuse.js?
Built by the team at Stellate
Fuse.js is made by the team at Stellate, the GraphQL CDN, which includes core team members and creators of some of the most popular open-source projects in the GraphQL ecosystem, including Prisma, the GraphQL Playground, GraphiQL, urql, Gatsby and others.