Vue Apollo - Невозможно выполнить запрос с переменной «Невозможно назначить только для чтения свойство« имя »объекта» - PullRequest
Новая
       31

Vue Apollo - Невозможно выполнить запрос с переменной «Невозможно назначить только для чтения свойство« имя »объекта»

0 голосов
/ 09 апреля 2019

Я пытаюсь запросить бэкэнд GraphQL на основе django-графена с интерфейсом на основе Vue Apollo / Nuxt для получения данных об одном продукте.

Мой метод попытки отправить запрос приводит к следующей ошибке: 

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

1 Ответ

1 голос
/ 09 апреля 2019

Как уже упоминалось в комментариях, вам нужно использовать String, а не string. В дополнение к этому ваш запрос должен выглядеть примерно так: 

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