Adapting a blog tutorial to use Composition API, Vue 3, and GraphQL / Apollo 4

Question

I'm having some difficulty with the Vue.js portion of a real python tutorial where you're building a blog with Vue, Django, Apollo, and GraphQL. So far, so good with the Django portion.

What I want to do with the Vue portion is use the newer composition API when implementing vue-apollo and the query work that starts here: https://realpython.com/python-django-blog/#step-8-fetch-the-data

There are plenty of great references to use: https://v4.apollo.vuejs.org/guide-composable/query.html#usequery https://v4.apollo.vuejs.org/migration/

... but using those to adapt the code has been difficult. I was able to configure my main.js with Apollo to use the new composition api and I think all is well here:

import { createApp } 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),
})

createApp(App).use(router).mount('#app')

The problem is with crafting the first query (Post.vue) using the newer methods isn't working and I don't know what to do with the author's "variables" property and post. This is a great article but would like to move this into a new version for 2023.

Original code from the tutorial:

<script>
import gql from 'graphql-tag'

...

export default {
  ...
  async created () {
    const post = await this.$apollo.query({
        query: gql`query ($slug: String!) {
          postBySlug(slug: $slug) {
            title
            subtitle
            publishDate
            metaDescription
            slug
            body
            author {
              user {
                username
                firstName
                lastName
              }
            }
            tags {
              name
            }
          }
        }`,
        variables: {
          slug: this.$route.params.slug,
        },
    })
    this.post = post.data.postBySlug
  },
  ...
}
</script>

My non-working attempt at a conversion:

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

export default {
  setup () {
    const { result } = useQuery(
    gql`
      query ($slug: String!) {
        postBySlug(slug: $slug) {
          title
          subtitle
          publishDate
          metaDescription
          slug
          body
          author {
            user {
              username
              firstname
              lastname
            }
          }
          tags {
            name
          }
         }
        }
      `)
      variables: {
        slug: this.$route.params.slug,
      }
    this.post = post.data.postBySlug
    },

.....

</script>