Как использовать фрагменты при объединении в Vue.js?

Кто-нибудь знает, как использовать фрагменты в союзах? Я видел документацию по React (https://www.apollographql.com/docs/react/advanced/fragments/#fragments-on-unions-and-interfaces), но не так много на Vue. У меня есть запрос, который возвращает два фрагмента, оба с __typename.

query {
    search(queryString: "lin") {
        ... on Professor {
            __typename
            name
        }
        ... on Course { 
            __typename
            name
            moduleCode
        }
    }
}

При запуске приложения vue я получил сообщение об ошибке «Вы используете фрагменты в своих запросах, но либо в Apollo Client не задан параметр addTypename: true, либо вы пытаетесь записать фрагмент в хранилище без __typename. . " Это код из моего приложения vue.

data() {
    return {
        result: []
    };
},
apollo: {
    // Query with parameters
    result: {
        // gql query
            query: gql'
                query search($queryString: String!) {
                    ... on Professor {
                        __typename
                        name
                    }
                    ... on Course { 
                        __typename
                        name
                        moduleCode
                    }
                }
            ',
            // Static parameters
            variables() {
               return {
                  queryString: 'lin mei'
                }
          }
    }
},

// In my apollo client options
// Override default cache
cache: new InMemoryCache(
    { addTypename: true }
}

Я получил следующие сообщения об ошибках:

  • Вы используете фрагменты в своих запросах, но либо в Apollo Client не установлен параметр addTypename: true, либо вы пытаетесь записать фрагмент в хранилище без __typename. Включите параметр addTypename и укажите __typename при написании фрагментов, чтобы клиент Apollo мог точно сопоставить фрагменты.
  • ПРЕДУПРЕЖДЕНИЕ ОБ УСТАРЕНИИ: использование фрагментов без __typename является неподдерживаемым поведением и будет удалено в будущих версиях клиента Apollo. Вы должны исправить это и установить для addTypename значение true сейчас.
  • Ошибка GraphQL: Фрагмент на Professor не может быть распространен внутри Query; Ошибка GraphQL: Фрагмент на курсе не может быть распространен внутри Query; Ошибка GraphQL: переменная $ queryString объявлена ​​поиском, но не используется
  • Ошибка GraphQL: Фрагмент на Professor не может быть распространен внутри Query; Ошибка GraphQL: Фрагмент на курсе не может быть распространен внутри Query; Ошибка GraphQL: переменная $ queryString объявлена ​​поиском, но не используется

Может ли кто-нибудь привести пример получения двух фрагментов из запроса во vue?


vue.js graphql vue-apollo
person Zachery Ng    schedule 22.06.2019    source источник
comment
Apollo добавляет __typename автоматически (по умолчанию addTypename равно true). Нет необходимости явно добавлять __typename к вашему запросу или устанавливать параметр.   -  person Daniel Rearden    schedule 22.06.2019
comment
Интересно .. После решения проблемы я мог удалить параметры из моей конфигурации и __typename из моего запроса без появления ошибки. Это странно. Неудивительно, что я ничего не нашел в Интернете. Еще раз спасибо!   -  person Zachery Ng    schedule 22.06.2019

Ответы (1)


arrow_upward
2
arrow_downward

Ваш запрос неверен. Вы назвали свою операцию search, но, вероятно, вместо этого хотели запросить это поле в корневом типе. Что-то вроде:

query ($queryString: String!) {
  search(queryString: $queryString) {
    ... on Professor {
      __typename
      name
    }
    ... on Course { 
      __typename
      name
      moduleCode
    }
  }
}

Примечание. Поскольку я не знаю вашу схему, я не могу точно сказать, что приведенный выше запрос является допустимым. Если запрашиваемый сервер предоставляет интерфейс GraphiQL или GraphQL Playground, вы должны использовать его для проверки ваших запросов, поскольку оба этих инструмента используют подсветку синтаксиса, зависящую от схемы.

Вы можете добавить поле id или _id к каждому фрагменту, чтобы обеспечить правильное кэширование. Если ни одно из полей не существует, вам необходимо указать пользовательскую функцию dataIdFromObject. Дополнительные сведения см. В документации.

person Daniel Rearden    schedule 22.06.2019
comment
Спасибо, что не только предоставили решение, но и предложили вернуть ID! Ваш запрос был правильным даже без схемы. - person Zachery Ng; 22.06.2019