对使用 React Apollo 的 useMutation 钩子不工作的乐观响应答案

【问题标题】：optimisticResponse not working for useMutation hook using React Apollo对使用 React Apollo 的 useMutation 钩子不工作的乐观响应
【发布时间】：2020-01-24 05:05:23
【问题描述】：

我正在使用最新的 Apollo Hooks (v3.1.1)

我的代码看起来像 -

import { ApolloProvider, useMutation, useQuery } from '@apollo/react-hooks'
import ApolloClient, { gql } from 'apollo-boost'
import React from 'react'

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  connectToDevTools: true,
})

const BLOGS_QUERY = gql`
  query blogs {
    blogs {
      id
      published
    }
  }
`

const PUBLISH_BLOG_MUTATION = gql`
  mutation publishBlog($id: ID, $published: Boolean) {
    publishBlog(id: $id, published: $published) {
      id
    }
  }
`

const Blog = () => {
  const { loading, error, data } = useQuery(BLOGS_QUERY)
  const [publishBlog] = useMutation(PUBLISH_BLOG_MUTATION)

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error</div>
  return (
    <div>
      <h1>Blog</h1>
      {data.blogs.map(item => {
        return (
          <div key={item.id}>
            <button
              onClick={() => {
                publishBlog({
                  variables: {
                    id: item.id,
                    published: !item.published,
                  },
                  optimisticResponse: {
                    __typename: 'Mutation',
                    publishBlog: {
                      __typename: 'Blog',
                      id: 1,
                      published: true,
                    },
                  },
                })
              }}
            >
              {item.published ? 'Published' : 'Not yet'}
            </button>
          </div>
        )
      })}
    </div>
  )
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Blog />
    </ApolloProvider>
  )
}

export default App

这是我可以制作的最小复制品。我不知道为什么它不起作用。

基本上，我在上面的示例中有一个button，其中所有文本都有Not yet，因为item.published 是false。

当我点击它时，它会向服务器发送一个请求并切换它并变为true 将文本更改为Published 并在我点击它时继续切换。

乐观的 UI 会确保它立即切换，但现在不会。

来自原始突变的 AFAIK 响应被放入 optimisticResponse 和 2 __typename 所以我正在这样做。

有什么想法吗？

我也在 Github 上做了最小的复现开源→https://github.com/deadcoder0904/test-optimistic-ui

它是用 React 和 Prisma2 制作的 :)

【问题讨论】：

你能描述一下什么是行不通的吗？更多细节通常会有所帮助。
@DrewReese 在上面的示例中我有一个button，因为item.published 是false，所以所有文本都有“尚未”。当我单击它时，它会向服务器发送一个请求并切换它并变为true 并继续切换。乐观的用户界面将确保它立即切换，但现在它没有。那是我的问题。乐观的用户界面不起作用。

标签： javascript reactjs react-apollo optimistic-ui

【解决方案1】：

感谢 Github 上的@zackify，我找到了答案。

基本上，published 在突变 PUBLISH_BLOG_MUTATION 中丢失了，所以我只需将其更改为：

const PUBLISH_BLOG_MUTATION = gql`
  mutation publishBlog($id: ID, $published: Boolean) {
    publishBlog(id: $id, published: $published) {
      id
      published
    }
  }
`

就是这样?‍♂️

【讨论】：