javascript - Vue Apollo - 无法使用变量“无法分配给对象的只读属性'名称'”进行查询

Question

我正在寻找使用 Vue Apollo / Nuxt 驱动的前端来查询由 django-graphene 驱动的 GraphQL 后端，以检索单个产品的数据。

我尝试发送查询的方法导致以下错误：

 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)

我目前的代码如下：

_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
          },
        }
      `;

以下查询适用于我的后端：

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

我知道这可能是一个简单的语法错误，但我不完全确定如何修复它。

编辑：正确的查询如下 - 感谢@DanielRearden：

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

Answer 1

如评论中所述，您需要使用Stringnot string。此外，您的查询应该看起来更像这样：

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