Question

我使用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.log("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开发工具用于Chrome浏览器，则可以看到新数据实际上已附加到缓存中，这使我感到困惑。

Answer 1

您是否已签出this apollo issue comment？

建议是创建一个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
}

突变引起的阿波罗反应不确定

1 个答案: