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.

1. 1Step 1

   Install the npm package

   npm install --save fuse graphql
   npm install --save-dev @graphql-typed-document-node/core
2. 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
3. 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!).