首页 文章

突变的阿波罗响应是不确定的

提问于
浏览
0

我使用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 server的实际响应:

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

如果我使用Apollo开发工具进行chrome,我可以看到新数据实际上附加到缓存中,这让我感到困惑 .

1 回答

  • 0

    你看过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
    }
    

相关问题