vue3 graphql组合api动态路由器不工作

Question

嗨，对下面的代码有什么想法吗？谢谢，

我的想法是使用vue3 graphql组合api (django后端)创建博客列表。获取和创建新的博客很好。然而，我在为博客的细节创建路由器链接方面有一些问题.我遵循了“阿波罗”网页上提供的例子，但没有帮助。

​

<template>
{{blog.title}}
</template>

<script>
import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'

const BLOG = gql`
      query($id: Int!){
      blog(id: $id){
        id
        title
      }
}`
export default {
 props: [ 'id' ],
 
 setup(props) {
   const {result, error} = useQuery(BLOG, props)

const blog = useResult(result, null, data => data.allBlogs)
   return {blog, error }
 }

}
</script>

<style>

</style>

​

*控制台错误为：* 在这里输入图像描述

Answer 1

我刚把“id”改为“blogId”，现在它很好用。

​

 setup(props){
        const {result, error, loading, refetch} = useQuery(gql`
            query getBlogById($blogId: ID!){
                blog(blogId: $blogId){
                    id,
                    title,
                    author,
                    body,
                    dataPublished
                }
            }
        `, () => ({
            blogId: props.blogId,
        }))

        const blog = useResult(result, null, data => data.blog)

        return { blog, error, loading, refetch}
    }

​