Support colocated fragments alongside components

[productdevbook]

Feature Request

Originally requested in #5 where @lewebsimple:

"Is it possible to colocate fragments alongside components (i.e. outside app/graphql)? I find this pattern to be extremely useful."

Current Behavior

GraphQL documents can only be defined inside app/graphql/ directory:

// graphql.config.ts
documents: [
  './app/graphql/**/*.{graphql,js,ts,jsx,tsx}',
],

Requested Behavior

Allow GraphQL fragments to be colocated with components anywhere in the project:

app/
  components/
    UserCard/
      UserCard.vue
      UserCard.fragment.graphql  ✅
    ProductList/
      ProductList.vue  
      ProductList.fragment.graphql  ✅
  graphql/
    queries/
      getUsers.graphql  ✅

Proposed Solution

Support configurable document patterns:

documents: [
  './app/graphql/**/*.{graphql,js,ts,jsx,tsx}',
  './app/components/**/*.{graphql,gql}',
  './app/pages/**/*.{graphql,gql}',
],

Benefits

• ✅ Better organization: Fragments live next to components that use them
• ✅ Easier maintenance: Data requirements visible with component code
• ✅ Industry standard: Used by Relay, Apollo Client, GraphQL Code Generator
• ✅ Improved DX: No navigation between /components and /graphql directories

Example Usage

<!-- app/components/UserCard/UserCard.vue -->
<script setup lang="ts">
import type { UserCardFragment } from './UserCard.fragment'

defineProps<{
  user: UserCardFragment
}>()
</script>

# app/components/UserCard/UserCard.fragment.graphql
fragment UserCardFragment on User {
  id
  name
  email
  avatar
}

Related

• 🚀 Share Your Excitement and Feedback about Nitro GraphQL\! #5 - Original discussion
• Support .gql file extension for GraphQL documents #44 - .gql extension support

Note

This is different from PR #43 which controls where generated files are written. This request is about where source .graphql files can be read from.