Nuxt Apollo GraphQL error: Variable of required type was not provided

Question

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

我正在尝试根据其 URI 在文件 _slug.vue.

中显示 post

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

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

<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'
      })
    }
  },

有人知道为什么我会收到错误消息吗？我该如何解决？

Answer 1

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

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

Nuxt Apollo GraphQL error: Variable of required type was not provided

Nuxt Apollo GraphQL error: Variable of required type was not provided

vue.js

graphql

nuxt.js

vue-apollo