A white background with black stripes forming a grid, this is the background of the hero section.
Fuse.js
StellateCheck Fuse on XFuse on Github
Read Fuse.js Announcement

Built forNext.JS, the logo has a black background with a white letter N in the center Next.js

End-to-end typesafe data fetching for frontend teams at scale

Use Fuse.js to build a data layer that fetches data exactly how you need it.
No more waiting for backend teams to update their APIs for you.

Get Started Star on GitHub

What's Fuse.js?

The best way to build a data layer

Fuse is an opinionated framework for creating fully typesafe data layers that allow frontend teams to handle the translation from resource-based APIs to their needs as easily as possible.

A Fuse.js code sample, this shows on the left a code-editor where we see us converting a user-endpoint to a user-node. The code sample starts by calling a function called node, passes a generic in there called ProductSource, representing the Product type on the REST endpoint, next it gives the node a name 'Product'. It specifies a load function, which is called 'getProductsByIds' and finishes off by defining the shape of the data that will be returned from our node, the shape has a name which in this case is a string that gets exposed from the product_name property of the resource, a details property which is also a string and a category which has a custom resolve function returning the product.category_id. On the right we see how this translates to GraphQL where we can query this node by means of `query GetProduct($id: ID!) { product(id: $id) { id name details category { id name} } }`

Why Fuse.js?

Optimal data fetching

  • Every page gets exactly, and only, the data it needs in a single network request.
  • Data requirements are defined per component, allowing codebases to scale no matter the size.
  • Nodes are automatically data loaded under the hood—no more n+1 problems.
A circle consisting of three layers, the outer one in a darker green showing a datasource with a PostGres and REST logo, the second layer in a lightest green showing a GraphQL logo and last but not least the center showing the Fuse.JS logo which is a black 'x' with a green outline.

Intuitive developer experience

  • It's all in the schema—centrally defined and enforced

    Never wonder “how do I get this data?” or deal with random data returned from random endpoints.

  • Typesafe end-to-end from data source to client component

    Catch server-side errors that impact the frontend before your users ever see them.

  • Everything you expect out of the box

    IDE autocomplete across server and client, hot module-replacement for any changes, an API playground, and more.

Why a data layer?

Ship fast at scale

Enable each team to work the way they prefer with minimal friction

Backend teams keep exposing the resourced-based APIs they know and love, and frontend teams can autonomously transform them to match their needs.

Allow engineering teams to parallelize their work

Frontend teams can develop the UI even if the backend API isn’t ready because they control the interface between the data layer and the UI.

Flexible by default

GraphQL APIs allow clients to query for only the exact data they need, building in flexibility to cover different needs for different UIs

A diagram showing, from top to bottom, a set of squares representing, the backend teams working with PostGres, Rest and gRPC, these connect to a central node named 'Fuse.js' which in turns connects to three nodes Android, iOS and web

Fuse.js's principles

  • The fuse logo grey is used as the color for the 'x' with a white outline

    Incrementally adoptable

    Start using Fuse.js for a single resource or microservice to try it out, no need to rewrite anything that's already working.

  • The fuse logo black is used as the color for the 'x' with a white outline

    Pit of success

    Fuse.js has an opinionated design that makes it easy to do the right thing and hard to do the wrong thing. It's optimized to guide you and your team down the "pit of success."

  • The fuse logo, black is used as the color for the 'x' with a green outline

    Great developer experience

    In order to be adopted at scale, Fuse.js needs to have a great developer experience.

Who is behind Fuse.js?

Built by the team at

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.

powered by

Pothos

The schema builder for creating GraphQL schemas in typescript using a strongly typed code first approach.

github.com/hayes/pothos

urql

Highly customizable and versatile GraphQL client, made to grow with your codebase.

github.com/urql-graphql/urql

GraphQL Yoga

The fully-featured GraphQL Server with focus on easy setup, performance and great developer experience.

github.com/dotansimha/graphql-yoga