如何将路由参数传递到 apollo / graphql 查询 - Vue/Quasar 项目。错误请求错误

Question

我遵循了一些不同的指南来获得带有博客等的 vue 前端，并启动并运行。该指南使用旧版本的 apollo、graphgql 和 vue，而我使用的是最新版本（以及 Quasar，而不是纯 vue）。我已经设法弄清楚了大部分内容。但是，我一直坚持使用路由参数中的 slug 来正确执行查询。这是我到目前为止得到的：

<script>
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";

export default {
  name: "Post",

  data() {
    return {
      result: null,
    };
  },

  async created() {
    const { result } = await useQuery(gql`
       {
        postBySlug(slug: $slug) {
          id
          title
          content
          featuredImage
          createdAt
          category {
            name
            slug
          }
          tag {
            name
            slug
          }
          user {
            id
            username
            firstName
            lastName
          }
          numberOfLikes
          likes {
            id
          }
          commentSet {
            id
            content
            createdAt
            isApproved
            user {
              username
              avatar
            }
            numberOfLikes
            likes {
              id
            }
          }
        }
        
      }
      
    `, { variables: { slug: this.$route.params.slug }}
     );  

     this.result = result 
  },
};

</script>

但是，我从服务器收到 POST http://127.0.0.1:8000/graphql 400（错误请求）。我已将路由参数中的 slug 记录到控制台，它是正确的。所以我相信由于某种原因，slug 没有正确传递到查询中。关于如何修复它有什么想法吗？

我已经通过在端点的 graphql 接口中运行查询的其余部分来检查其是否正确。