Currently, I am aiming to interact with a Django-Graphene powered GraphQL backend using a Vue Apollo / Nuxt front end in order to fetch data for a single product.
When attempting to send the query, I encountered 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)
This is the code snippet that I am currently working with:
_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 is functional with my backend:
query {
product (slug: "test-product") {
id
name
slug
}
}
I suspect this issue may be caused by a simple syntax error, but I am unsure how to correct it.
UPDATE: The corrected query should look like this - credits to @DanielRearden:
export const SINGLE_PRODUCT_QUERY = gql `
query product( $slug: String!) {
product(slug: $slug) {
name
description
slug
},
}
`;