Documentation
Querying your API (client)
JavaScript frameworks
React & React Native

React & React Native

Fuse supports querying your data from React, if you are using Next.js we have a more specific guide for that here.

Providing the client

First we need to provide the GraphQL client to our React tree, this can be done by either using the client we provide in the generated files or any other GraphQL client that supports typed-document-node for typing their hooks (@apollo/client for example).

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createClient, Provider } from '../fuse'
import App from './App.tsx'
 
const client = createClient({
  url: 'http://localhost:4000/graphql',
  // suspense: true in case you need suspense
})
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider value={client}>
      <App />
    </Provider>
  </React.StrictMode>,
)

Querying data

We can query our data as follows, note that we are using a fragment coming from the Avatar component.

import * as React from 'react'
 
import { graphql, useQuery } from '../fuse'
import { Avatar, AvatarFragment } from './components/Avatar'
 
const UserQuery = graphql(`
  query User ($id: ID!) {
    user(id: $id) {
      name
      ...Avatar_UserFields
    }
  }
`, [AvatarFragment])
 
const App = () => {
  const [result] = useQuery({ query: UserQuery, variables: { id: '1' } })
 
  if (result.fetching) return <p>Loading...</p>
 
  return (
    <div>
      <p>Welcome {result.data.user.name}</p>
      <Avatar user={result.data.user} />
    </div>
  )
}

In the Avatar component we can now use the fragment to render what we need.

import * as React from 'react'
import { graphql, readFragment, FragmentOf } from '../../fuse'
 
export const AvatarFragment = graphql(`
  fragment Avatar_UserFields on User {
    name
    avatarUrl
  }
`)
 
export const Avatar = (props: {
  user: FragmentOf<typeof AvatarFragment>
}) => {
  const user = readFragment(AvatarFragment, props.user)
 
  return (
    <img src={user.avatarUrl} alt={user.name} />
  )
}

Using mutations

Mutations work in a similar way, we can use the useMutation hook to execute a mutation.

import * as React from 'react'
import { graphql, useMutation } from '../fuse'
import { AvatarFragment } from './components/Avatar'
 
const UpdateUser = graphql(`
  mutation UpdateUser ($id: ID!, firstName: $String!) {
    user(id: $id, firstName: $firstName) {
      ...Avatar_UserFields
    }
  }
`, [AvatarFragment])
 
const UpdateUser = () => {
  const [result, update] = useMutation(UpdateUser)
 
  return (
    <button onClick={() => update({ id: '1', firstName: 'John' })}>
      Update user
    </button>
  )
}
TypesNext.js