Vue Apollo - Cannot query with variable "Cannot assign to read only property 'name' of object"

Question

I'm looking to query a django-graphene powered GraphQL backend with a Vue Apollo / Nuxt powered front end to retrieve a single product's data.

My method of trying to send the query results in the following error:

 ERROR  Cannot assign to read only property 'name' of object 'GraphQLError: Syntax Error: Expected Name, found $'

 at errorMiddleware (node_modules\@nuxt\server\dist\server.js:320:18)
 at call (node_modules\connect\index.js:235:7)
 at next (node_modules\connect\index.js:183:5)
 at nuxtMiddleware (node_modules\@nuxt\server\dist\server.js:205:5)

My current code is as follows:

_slug.vue

  <template>
    <div>
      <h1>{{ product.name }}</h1>
      <div class="description" v-html="product.description"></div>
    </div>
  </template>

  <script>
    import { SINGLE_PRODUCT_QUERY } from '@/graphql/products'

    export default {
      props: ['id', 'slug'],
      data() {
        return {
          product: {
            name: 'Test Product',
            description: 'Test Description',
            slug: 'test'
          }
        }
      },
      apollo: {
        product: {
          query: SINGLE_PRODUCT_QUERY,
          variables: {
            slug: 'test-product'
          }
        }
      }
    }
  </script>

graphql/products.js

      import gql from 'graphql-tag'

      export const SINGLE_PRODUCT_QUERY = gql `
        query {
          product($slug: string!) {
            name
            description
            slug
          },
        }
      `;

The following query works fine with my backend:

    query {
        product (slug: "test-product") {
          id
          name
          slug
        }
      }

I understand it could be a simple syntax error, but I'm not totally sure how to fix it.

EDIT: The correct query is as follows - thanks @DanielRearden:

    export const SINGLE_PRODUCT_QUERY = gql `
      query product( $slug: String!) {
        product(slug: $slug) {
          name
          description
          slug
        },
      }
    `;

Duplicate of [GraphQl variable using grapiql - variable is undefined](https://stackoverflow.com/questions/54293234/graphql-variable-using-grapiql-variable-is-undefined). You need to define your variables as part of the operation definition. Also, type names must be exact (i.e. `String` not `string`). — Daniel Rearden, Apr 09 '19 at 11:48
Thanks @DanielRearden, that ended up sorting my issue, fixed code edited into the post above. — Pete Dermott, Apr 09 '19 at 11:54

score 1 · Accepted Answer · answered Apr 09 '19 at 11:54

As mentioned in the comments, you need to use String not string. Further to that your query should look more like this:

export const SINGLE_PRODUCT_QUERY = gql`
  query Product($slug: String!) {
    product(slug: $slug) {
      name
      description
      slug
    },
  }
`;

Vue Apollo - Cannot query with variable "Cannot assign to read only property 'name' of object"

1 Answers1