Fragments

You can create reusable fragments and either import them in other GraphQL files or let nuxt-graphql-middleware automatically inline them for you.

WARNING

Fragment names, just as query/mutation names, must be unique across the entire repository.

Manual import

By default, fragments have to be manually imported in every GraphQL file. This is done using the special #import syntax at the top of a file:

pages/allFilms.query.graphql

#import "~/components/Film/film.fragment.graphql"

query allFilms {
  allFilms {
    films {
      ...film
    }
  }
}

components/Film/film.fragment.graphql

fragment film on Film {
  id
  title
  edited
}

The path is always relative to your app root and is being resolved by Nuxt, e.g. you can also use aliases like ~, @ or #custom-alias.

Automatic import

It's possible to automatically inline fragments:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-graphql-middleware'],

  graphqlMiddleware: {
    autoInlineFragments: true, 
  },
})

This will disable importing via #import and will automatically inline fragments:

query.getUsers.graphql

query userById($id: ID!) {
  ...getUserQuery
}

fragment.getUserQuery.graphql

fragment getUserQuery on Query {
  userById(id: $id) {
    ...user
  }
}

fragment.user.graphql

fragment user on User {
  id
  firstName
  lastName
  email
  description
  dateOfBirth
}