Server Components

When using React server components, Fuse.js skips the intermediate step of reaching out to an API endpoint and instead executes the GraphQL directly in the server component renderer:

import { graphql } from '@/fuse'
import { execute } from '@/fuse/server'
 
const UserQuery = graphql(`
  query User($id: ID!) {
    user(id: $id) {
      id
      name
      firstName
      avatarUrl
    }
  }
`)
 
export default async function Page() {
  const result = await execute({ query: UserQuery, variables: { id: '1' } })
}

This is the base way to query your components through server-components, you can now pass on the data to child components.

Server actions

We can also invoke mutations as part of a server-action (opens in a new tab) This requires us to create a new file, for example in this example we'll call a mutation with a name argument that returns us Hello ${args.name}.

We create actions/hello.ts and give it the content of

'use server'
 
import { graphql } from '@/fuse'
import { execute } from '@/fuse/server'
import { redirect } from 'next/navigation'
 
const SayHello = graphql(`
  mutation Hello($name: String!) {
    sayHello(name: $name)
  }
`)
 
export async function sayHello(args: { name: string }) {
  const result = await execute({ query: SayHello, variables: { name: args.name } })
 
  console.log(result.data?.sayHello)
 
  // After completing our mutation we perform a redirect
  redirect('/')
}

We can use this on the client by doing

import { sayHello } from './actions/sayHello'
 
const Component = ({ name }) => {
  const sayHelloFuse = sayHello.bind(undefined, { name: name || 'fuse' })
  return (
    <form action={sayHelloFuse}>
      <button type='submit'>Say hello and redirect to /</button>
    </form>
  )
}

Overview Client components