Documentation
Querying your API (client)
JavaScript frameworks
Vue

Vue

Fuse supports querying your data from Vue, as long as your querying library supports typed-document nodes then your output and variables will be typed. Some of these clients include @urql/vue (opens in a new tab) and vue/apollo (opens in a new tab).

Constructing a typed-document-node for a query:

import { graphql } from '../fuse'
import { Avatar, AvatarFragment } from './components/Avatar'
 
const UserQuery = graphql(`
  query User ($id: ID!) {
    user(id: $id) {
      name
      ...Avatar_UserFields
    }
  }
`, [AvatarFragment])

and for a fragment:

import { graphql, readFragment, FragmentOf } from '../../fuse'
 
export const AvatarFragment = graphql(`
  fragment Avatar_UserFields on User {
    name
    avatarUrl
  }
`)
 
// Derive the input-type: FragmentOf<typeof AvatarFragment>
// Apply fragment-masking: readFragment(AvatarFragment, user);