适配Vue3 Composition API与Apollo4改写博客教程Vue查询代码

先修正 main.js 的 Apollo 配置问题 #

你当前的main.js创建了两个独立的Vue实例，导致配置了DefaultApolloClient的实例没有被挂载，正确的写法应该复用同一个实例：

import { createApp, h, provide } from 'vue'
import App from './App.vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { ApolloClient, InMemoryCache } from '@apollo/client/core'
import router from './router'

const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
    uri: 'http://localhost:8000/graphql',
    cache,
})

const app = createApp({
    setup() {
      provide(DefaultApolloClient, apolloClient)
    },
    render: () => h(App),
})

// 复用同一个app实例添加路由并挂载
app.use(router).mount('#app')

修正 Post.vue 的 Composition API 代码 #

你尝试的代码存在几个问题：variables参数位置错误、不能在setup中使用this、字段名拼写错误（原教程是firstName/lastName，你写成了小写的firstname/lastname），以及没有正确处理响应式的result。以下是完整修正后的代码：

<script>
import AuthorLink from '@/components/AuthorLink'
import { useQuery } from '@vue/apollo-composable'
import { useRoute } from 'vue-router'
import gql from 'graphql-tag'
import { computed } from 'vue'

export default {
  setup () {
    // 获取当前路由实例
    const route = useRoute()
    
    // 定义GraphQL查询
    const POST_QUERY = gql`
      query ($slug: String!) {
        postBySlug(slug: $slug) {
          title
          subtitle
          publishDate
          metaDescription
          slug
          body
          author {
            user {
              username
              firstName
              lastName
            }
          }
          tags {
            name
          }
        }
      }
    `

    // 执行查询，将路由参数作为variables传入
    const { result, loading, error } = useQuery(POST_QUERY, {
      slug: route.params.slug
    })

    // 用computed提取响应式的post数据
    const post = computed(() => result.value?.postBySlug)

    // 返回需要在模板中使用的变量
    return {
      post,
      loading,
      error
    }
  }
}
</script>

关键修正点说明 #

• 路由参数获取：在Composition API中，通过useRoute()获取路由实例，替代选项式API中的this.$route
• useQuery 参数传递：useQuery的第二个参数直接传入变量对象，不需要单独写variables关键字
• 响应式数据处理：result是一个响应式对象，通过computed提取内部的postBySlug数据，确保模板能实时响应变化
• 字段名修正：将firstname/lastname改回原教程的firstName/lastName，避免GraphQL查询返回null
• setup 上下文：setup函数中没有this，所有需要的API（如路由、Apollo）都通过对应的Composable函数导入使用

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