オプティミスティックUIが更新されない - Apollo

Question

突然変異を作成した後、ページが更新されるまでUIは新しく追加されたアイテムで更新されません。私は問題が突然変異の更新セクションにあると思うが、私はさらにトラブルシューティングを行う方法がわからない。どんなアドバイスも大歓迎です。

クエリ（別ファイル）

//List.js 

export const AllItemsQuery = gql` 
    query AllItemsQuery { 
    allItems { 
     id, 
     name, 
     type, 
     room 
     } 
    } 
`; 

変異

import {AllItemsQuery} from './List' 

const AddItemWithMutation = graphql(createItemMutation, { 
    props: ({ownProps, mutate}) => ({ 
     createItem: ({name, type, room}) => 
      mutate({ 
       variables: {name, type, room}, 
       optimisticResponse: { 
        __typename: 'Mutation', 
        createItem: { 
         __typename: 'Item', 
         name, 
         type, 
         room 
        }, 
       }, 
       update: (store, { data: { submitItem } }) => { 
        // Read the data from the cache for this query. 
        const data = store.readQuery({ query: AllItemsQuery }); 
        // Add the item from the mutation to the end. 
        data.allItems.push(submitItem); 
        // Write the data back to the cache. 
        store.writeQuery({ query: AllItemsQuery, data }); 
       } 
      }), 
    }), 
})(AddItem); 

Answer 1

有望に見える、間違っている一つのことは、突然変異data: { submitItem }の結果の名前です。楽観的な応答では、createItemと宣言しているためです。あなたはconsole.logでしたか？突然変異はどのように見えますか？

update: (store, { 
 
    data: { 
 
    submitItem // should be createItem 
 
    } 
 
}) => { 
 
    // Read the data from our cache for this query. 
 
    const data = store.readQuery({ 
 
    query: AllItemsQuery 
 
    }); 
 
    // Add our comment from the mutation to the end. 
 
    data.allItems.push(submitItem); // also here 
 
    // Write our data back to the cache. 
 
    store.writeQuery({ 
 
    query: AllItemsQuery, 
 
    data 
 
    }); 
 
}

Answer 2

私はこの問題は、あなたが上記の持っているoptimisticResponse機能（それは正しいアプローチである）であることを全くわからないんだけど、私はあなたが間違ったリターンを使用していることを推測します値。

optimisticResponse: { 
    __typename: 'Mutation', 
    updateThing: { 
    __typename: 'Thing', 
    thing: result, 
    }, 
}, 

を私は野生の推測を取らなければならなかったのであれば、私はあなたの戻り値内タイプを使用しようとする場合がありますことを言うだろう：

例えば、ここでの応答は、私たちが使っているということです

optimisticResponse: { 
    __typename: 'Mutation', 
    createItem: { 
     __typename: 'Item', 
     item: { // This was updated 
      name, 
      type, 
      room 
     } 
    }, 
}, 

代わりに、ただrefetchとすることができます。私たちのコードベースでは、私たちが望むやり方を更新しないだけで、突然変異が解決された後に私たちが突き詰めて再フェッチする理由を突き止めることはできません（突然変異は約束を返します）。例：

this.props.createItem({ 
    ... // variables go here 
}).then(() => this.props.data.refetch()) 

2番目の方法は毎回有効です。正確には楽観的ではありませんが、データが更新されます。