微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Graphql Apollo OptimistResponse 刷新我的整个列表,并需要更长的时间在屏幕上显示新项目

如何解决Graphql Apollo OptimistResponse 刷新我的整个列表,并需要更长的时间在屏幕上显示新项目

我有一个简单的 todo webapp,我正在尝试让 optimisticResponse 为 create Todo 工作,但是当我将它添加到我的页面时,它会刷新整个列表并且加载看起来比没有 {{1 }}。为什么会这样?

这是我对 optimisticResponse函数

createtodo

具有使用乐观响应的行为的 gif:

enter image description here


没有乐观响应的 gif:

enter image description here


作为参考,我对使用 const [addTodo,{ loading }] = useMutation(gql(createtodo)); const handleSubmit = (event: React.FormEvent) => { const variables = { input: { title,description,},}; event.preventDefault(); addTodo({ variables,optimisticResponse: { __typename: 'Mutation',createtodo: { __typename: 'Todo',id: 'some-id' + title,title,update: (cache,response) => { const { data: { createtodo } } = response; const todosInCache: ListTodoResponse | null = cache.readQuery({ query: gql(listTodos),}); const currentList = todosInCache?.listTodos?.items; if (currentList) { cache.writeQuery({ query: gql(listTodos),data: { listTodos: { ...todosInCache?.listTodos,items: [createtodo,...currentList],}); } },}); }; 的 deletetodo 具有相同的逻辑并且它按预期工作,我的代码

optimisticResponse

以及带有 const [removetodo] = useMutation(gql(deletetodo)); const onRemove = (todo: Todo) => { removetodo({ variables: { input: { id: todo.id } },deletetodo: { __typename: 'Todo',...todo,{ data }) => { const todosInCache: ListTodoResponse | null = cache.readQuery({ query: gql(listTodos),}); const currentList = todosInCache?.listTodos?.items; if (currentList) { const newList = currentList.filter((item: Todo) => ( item.id !== data?.deletetodo?.id )); cache.writeQuery({ query: gql(listTodos),items: newList,}); }; 的 deletetodo 的 gif:

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。