Vue3 graphql composition api dynamic router segment is not working

Help
,
1

Hi all, I was trying to create a list of blogs using vue3 graphql composition api (django backend). Fetching and creating new blog works fine. However, I have some problem on creating router-link for the detail of the blog. I followed the the example provided on vue apollo page, it didn’t help.

This is my Details.vue view

<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>
2

I assume you fixed this, but just looking at this, it seems to be that the data.allBlogs part is wrong? Surely it would just be data.blog?

One way to verfiy if that is right, is console.log result and see what the nested object is called