dea*_*904 19 apollo reactjs graphql react-apollo optimistic-ui
我正在使用<Mutation />具有Render Prop API的组件并尝试在UI中执行乐观响应.
到目前为止,我在_onSubmit功能中有这个块-
createApp({
variables: { id: uuid(), name, link },
optimisticResponse: {
__typename: "Mutation",
createApp: {
__typename: "App",
id: negativeRandom(),
name,
link
}
}
});
Run Code Online (Sandbox Code Playgroud)
我的<Mutation />组件看起来像 -
<Mutation
mutation={CREATE_APP}
update={(cache, { data: { createApp } }) => {
const data = cache.readQuery({ query: LIST_APPS });
if (typeof createApp.id == "number") {
data.listApps.items.push(createApp);
cache.writeQuery({
query: LIST_APPS,
data
});
}
}}
>
{/*
some code here
*/}
</Mutation>
Run Code Online (Sandbox Code Playgroud)
我知道该update函数在<Mutation />运行两次,一次optimisticResponse运行时和第二次运行时服务器响应.
在第一次,我给他们id作为一个number.结帐createApp在optimisticResponse哪里id: negativeRandom()
这就是为什么我update的<Mutation />组件中的prop 有一个检查是否createApp.id是number然后将它推入数组中.这意味着如果从本地返回数据然后将其推送到本地缓存中,并且如果从服务器返回,则不推送它.
但是,只有从服务器返回时才会显示数据.该函数update运行两次,但不会将其推入数组中.
我想可能有3个问题 -
update按下本地状态时,该功能不会运行
我已经尝试过fetchPolicy等于cache-and-network&cache-first但它也没有用.
在__typename在optimisticResponse.Idk如果Mutation是正确的值,所以我也尝试AppConnection了但它仍然不起作用.
完整的代码可以在这里找到.为简单起见,整个代码存在于一个文件中 它是一个非常简单的应用程序,有2个输入和1个提交按钮.看起来像 -

显然这是 Apollo 或 React Apollo 包中的一个错误。不知道哪个错误或者只是针对 React Native,但我只是更新了我的依赖项并解决了它,而没有更改任何代码
您可以在https://github.com/deadcoder0904/react-native-darkmode-list查看完整代码
| 归档时间: |
|
| 查看次数: |
969 次 |
| 最近记录: |