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

Question

I am using Nuxt.js with Apollo and trying to access GraphQL from WordPress. I do manage to get data so I know it works.

I am trying to display a post depending on its URI, in the file _slug.vue.

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

The issue is when I try to pass a variable to the query. I get the following error GraphQL error: Variable "$uri" of required type "ID!" was not provided. (I know there is a post/data on the page/URI I am accessing).

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

While the fetchPost.gql file looks like this (I have also tried inlining the query, but it makes no difference).

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

The nuxt.config.js looks like this.

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

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

Anyone have any idea why I get the error, and how I could fix it?

Marcel Müller · Accepted Answer · 2022-09-02 11:17:40Z

1

If you use typescript and linters, the tool chain would prevent such problems immediately and save you a lot of time.

answered Sep 2, 2022 at 11:17

Marcel Müller

365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklas · Accepted Answer · 2021-04-24 18:16:02Z

0

I wrote variables the wrong way. So the following works.

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

answered Apr 24, 2021 at 18:16

Niklas

4057 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related