Ответ Аполлона на мутацию не определен

Я использую Apollo-client 2.3.5, чтобы добавить данные, а затем обновить локальный кеш. Мутация работает, но результат мутации не определен в клиенте Apollo, но ответ в сетевом запросе правильный.

Итак, у меня есть два запроса: один для получения всех бронирований и один для добавления бронирования.

const addBookingGQL = gql`
mutation createBooking($ref: String, $title: String, $description: String, $status: String!){
    createBooking(ref: $ref, title: $title, description: $description, status: $status){
        id
        ref
        title
        description
        status
    }


   }
`;

const GET_BOOKINGS = gql`
  query {
    bookings {
      id
      ref
      title
      status
      description
    }
  }
`;

Затем у меня есть оболочка мутации Apollo, в которой я использую опору обновления. В addBooking должен быть указан результат мутации, но, к сожалению, он не определен.

<Mutation 
                mutation = {addBookingGQL}
                update = {(cache, { data: { addBooking } }) => {
                    const { bookings } = cache.readQuery({ query: GET_BOOKINGS });
                    console.info("cache read query bookings: ", cache);
                    cache.writeQuery({
                        query: GET_BOOKINGS,
                        data: { bookings: bookings.concat([addBooking]) }
                    });
                }}
            >
                {(addBooking, { loading, error }) => (
                    <div>
                        <Button 
                            onClick = {() => {
                                addBooking({
                                    variables: {
                                        ref: this.state.ref,
                                        title: this.state.title,
                                        description: this.state.description,
                                        status: "BOOK_BOX",
                                    }
                                });

                                this.handleClose();

                            }} 
                            color = "primary">
                            Create
                        </Button>
                        {loading && <p>Loading...</p>}
                        {error && <p>Error :( Please try again</p>}
                    </div>
                )}

            </Mutation>

Это приводит к следующей ошибке в консоли:

    errorHandling.js:7 Error: Error writing result to store for query:
 {
  bookings {
    id
    ref
    title
    status
    description
    __typename
  }
}

Cannot read property '__typename' of undefined
    at Object.defaultDataIdFromObject [as dataIdFromObject] (inMemoryCache.js:33)
    at writeToStore.js:347
    at Array.map (<anonymous>)
    at processArrayValue (writeToStore.js:337)
    at writeFieldToStore (writeToStore.js:244)
    at writeToStore.js:120
    at Array.forEach (<anonymous>)
    at writeSelectionSetToStore (writeToStore.js:113)
    at writeResultToStore (writeToStore.js:91)
    at InMemoryCache.webpackJsonp../node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.write (inMemoryCache.js:96)

Я попытался запустить мутацию в средстве разработки Graphiql, получив ожидаемый ответ:

{
  "data": {
    "createBooking": {
      "id": "bd954579-144b-41b4-9c76-5e3c176fe66a",
      "ref": "test",
      "title": "test",
      "description": "test",
      "status": "test"
    }
  }
}

В последний раз я посмотрел на фактический ответ сервера graphql:

{
 "data":{
  "createBooking":{
   "id":"6f5ed8df-1c4c-4039-ae59-6a8c0f86a0f6",
   "ref":"test",
   "title":"test",
   "description":"test",
   "status":"BOOK_BOX",
   "__typename":"BookingType"
  }
 }
}

Если я использую инструмент Apollo dev для Chrome, я вижу, что новые данные фактически добавляются в кеш, что меня смущает.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Что такое Apollo Client и зачем он нужен?
Что такое Apollo Client и зачем он нужен?
Apollo Client - это полнофункциональный клиент GraphQL для JavaScript-приложений, который упрощает получение, управление и обновление данных в...
9
0
2 755
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы проверяли этот комментарий к проблеме Apollo?

Предлагается создать apollo-link, который анализирует операционные переменные и пропускает ключи, содержащие __typename:

function createOmitTypenameLink() {
  return new ApolloLink((operation, forward) => {
    if (operation.variables) {
      operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename)
    }

    return forward(operation)
  })
}

function omitTypename(key, value) {
  return key === '__typename' ? undefined : value
}

Другие вопросы по теме