Documentation
Querying your API (client)
Overview

Querying from the client

Fuse generates a fully type-safe TypeScript GraphQL client (more languages coming) during fuse dev and fuse build that is compatible with all popular JavaScript-based frameworks (see how to opt-out of client code generation below):

However, even if your framework of choice isn't on this list (yet), Fuse creates a standard GraphQL API at its core. That means your API can be accessed with any GraphQL client in any language and you could even access it with raw HTTP requests if you are in an environment that doesn't have a GraphQL client available:

We also keep a list of recommended best practices for client data fetching, specifically we strongly encourage the use of fragment co-location.

Client code generation

When you run fuse dev/build (or next dev/build if using the Next.js plugin), Fuse will automatically generate a type-safe GraphQL API client for React, React Native & Next.js.

What it generates

When you generate the type-safe client, you'll see the fuse/ folder populate with a bunch of files. These don't need to be touched and are mostly there to help with typing your results, variables and facilitating the client-methods.

Let's go over each file:

  • fuse/client.ts: This is the main entry-point for React client components (including 'use client' in Next.js's App Router). It exports the useQuery/... hooks which you can use in your client components to talk to your API.
  • fuse/server.ts: This is the main entry-point for React server components and server actions. It exports an execute function which takes a Document and variables and will execute the operation in-process without an extra HTTP request to the API.
  • fuse/fragment-masking.ts: The readFragment and FragmentOf helpers are exported from here, these helpers basically ensure that the props you pass in will be reduced to the selection of fields of your fragment.
  • fuse/gql.ts: The graphql() function is exported from here, this helper ensures that both the Result and Variables are typed correctly for a given Document.
  • fuse/graphql.ts: This file contains a translation of your GraphQL schema to TypeScript types. It also contains the Document type which is a helper type to type your GraphQL documents.
  • fuse/pages.ts (Next.js-only): This is the main entry-point for the Next.js /pages router. It exports the withUrqlClinet and initUrqlClient to work with getServerSideProps, ... As well as React hooks which you can use in your components.

Disabling the client code generation

If you want to opt-out of this, for example if you want to keep your API in a dedicated repository OR if you're querying Fuse from an unsupported framework, you can add the --server flag to fuse dev/build to only develop and build the API server, but not generate a client.

Corrolarily, if you want to generate a client without running the server, you can run fuse dev/build with the --client flag to only run the client code generation but not develop/build the API server.

fuse dev --server # only develop the API server
fuse dev --client # only generate the React client
 
fuse build --server # only build the API server
fuse build --client # only build the React client
Getting StartedBest practices