Nuxt3使用独立.gql文件执行GraphQL查询的配置与选型咨询

一、将GraphQL查询存储到独立.gql文件 #

不管你选择用useFetch还是nuxt-apollo，都可以通过以下步骤把查询抽离到独立文件：

1. 配置Nuxt识别.gql文件
   在nuxt.config.ts中添加Vite配置，让Nuxt能正确解析.gql文件：

export default defineNuxtConfig({
  vite: {
    assetsInclude: ['**/*.gql']
  }
})

2. 创建独立的查询文件
   在项目根目录新建queries文件夹，比如创建queries/getPosts.gql：

query GetPosts {
  posts {
    nodes {
      id
      title
      content
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
  }
}

3. 在组件中导入使用

• 若用useFetch：

<script setup>
// 导入查询文件
import getPostsQuery from '~/queries/getPosts.gql'

// 发起GraphQL请求
const { data: posts } = await useFetch('https://你的WordPress站点域名/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: getPostsQuery
  })
})
</script>

• 若用nuxt-apollo：
  导入查询后直接用useQuery组合式函数：

<script setup>
import getPostsQuery from '~/queries/getPosts.gql'
const { result: posts } = useQuery(getPostsQuery)
</script>

二、useFetch vs nuxt-apollo的选择 #

用useFetch的场景 #

• 项目GraphQL需求简单，仅需少量查询/突变操作
• 不想引入额外依赖，追求轻量实现
• 完全足够对接无头WordPress的基础GraphQL API，只要正确构造POST请求即可

用nuxt-apollo的场景 #

• 项目有大量GraphQL操作，需要缓存管理、自动重取、变量校验等功能
• 需要处理复杂的查询逻辑（比如嵌套字段、分页、过滤）
• 追求更优雅的代码写法，以及更好的SSR/SSG兼容性
• nuxt-apollo会自动处理请求头、错误捕获等细节，对接WordPress更省心

三、对接无头WordPress的注意事项 #

1. 确保WordPress已安装WPGraphQL插件，API端点通常为站点域名后加/graphql
2. 若需访问私有内容（比如草稿、自定义权限内容），需在请求头添加认证信息：
   • 用useFetch时手动加Authorization头：

   const config = useRuntimeConfig()
   const { data } = await useFetch('https://你的WordPress站点域名/graphql', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       'Authorization': `Bearer ${config.public.wpGraphqlToken}`
     },
     body: JSON.stringify({ query: yourQuery })
   })
   

   • 用nuxt-apollo时在配置中统一设置：

   export default defineNuxtConfig({
     modules: ['@nuxtjs/apollo'],
     apollo: {
       clients: {
         default: {
           httpEndpoint: 'https://你的WordPress站点域名/graphql',
           httpLinkOptions: {
             headers: {
               Authorization: `Bearer ${process.env.WP_GRAPHQL_TOKEN}`
             }
           }
         }
       }
     }
   })
   

内容的提问来源于stack exchange，提问作者EmWe