Nuxt Apollo GraphQL 错误：未提供所需类型的变量答案

【问题标题】：Nuxt Apollo GraphQL error: Variable of required type was not providedNuxt Apollo GraphQL 错误：未提供所需类型的变量
【发布时间】：2021-07-18 11:44:51
【问题描述】：

我正在使用带有Apollo 的 Nuxt.js 并尝试从 WordPress 访问 GraphQL。我确实设法获取数据，所以我知道它有效。

我正在尝试根据其 URI 在文件 _slug.vue 中显示帖子。

pages/
--| _slug/
--| index.vue

问题是当我尝试将变量传递给查询时。我收到以下错误GraphQL error: Variable "$uri" of required type "ID!" was not provided.（我知道我正在访问的页面/URI 上有一个帖子/数据）。

<template>
  <article>
    {{ post }}
  </article>
</template>

<script>
import fetchPost from '~/apollo/fetchPost.gql'

export default {
  apollo: {
    post: {
      query: fetchPost,
      varibles() {
        return {
          uri: this.$route.path,
        }
      },
    },
  },
}
</script>

虽然fetchPost.gql 文件看起来像这样（我也尝试过内联查询，但没有区别）。

query queryPost($uri: ID!) {
  post(id: $uri, idType: URI, asPreview: false) {
    categories {
      nodes {
        name
        uri
      }
    }
    content(format: RENDERED)
    date
    excerpt(format: RENDERED)
    featuredImage {
      node {
        altText
        caption(format: RENDERED)
        sourceUrl(size: LARGE)
        mediaItemUrl
      }
    }
    id
    modified
    postId
    slug
    title(format: RENDERED)
    uri
  }
}

nuxt.config.js 看起来像这样。

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: process.env.WPGRAPHQL_ENDPOINT,
      }
    }
  },

  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/:slug*',
        component: '~/pages/_slug.vue'
      })
    }
  },

任何人知道我为什么会收到错误，以及如何解决它？

【问题讨论】：

标签： vue.js graphql nuxt.js vue-apollo

【解决方案1】：

我写错了variables。所以下面的作品。

 variables() {
    return {
      uri: this.$route.path,
    }

【讨论】：