🎉 Announcing Fuse.js: the opinionated framework for easily creating typesafe data layers →
Documentation
Getting Started

Fuse.js Introduction

Fuse.js is an open-source library for building data layers. (star us on GitHub! (opens in a new tab)) It empowers frontend teams to build and own the central translation layer from the backend microservices, data stores, & third-party APIs to the optimal GraphQL API for their websites, web apps, and mobile apps.

Fuse.js combines the best tooling from the GraphQL ecosystem to guide you to an organizational and technical “pit of success.” While it uses GraphQL (because it is the best technical choice) and familiarity with GraphQL will make for a minimal learning curve, you do not need to know GraphQL to use Fuse.js.

Getting Started

Before you begin

Before you start using Fuse.js, you need to have:

  • Familiarity with TypeScript
  • Basic familiarity with writing GraphQL queries*
  • A Next.js app**

*Note that we are working on improving the documentation so that Fuse.js doesn't even require basic familiarity with writing GraphQL queries.

**Note that a Fuse.js data layer can also be developed and deployed outside of Next.js. However, our current focus is on making the experience with Next.js great, so expect rough edges elsewhere.

Set up your data layer

In the root folder of your existing Next.js application run create-fuse-app with npx, pnpm, or yarn:

npx create fuse-app

This will automatically set up Fuse.js for you, which consists of five main steps:

  1. Install the npm packages
  2. Add the Next.js plugin to your next.config.js
  3. Create the /api/fuse API route
  4. Set up GraphQLSP to get IDE autocomplete
  5. Adds a first example type in types/User.ts

It generates the example User.ts type to allow you to verify your Fuse.js setup (see the next step) and serves as an example how to use Fuse.js to build a data layer. However, please delete the types/User.ts file once you start building your own data layer.

Verify your Fuse.js setup is working

Now, if you run next dev and open localhost:3000/api/fuse in the browser, you'll see GraphiQL and be able to query for a user:

Screenshot of GraphiQL running at localhost:3000/api/fuse showing a query for a user, their id, name, and firstName, and the corresponding result

You've now got a Fuse.js data layer setup with your Next.js app! 🎉 Next, learn how to query your Fuse.js data layer from the client.

Overview