optimisticResponse 不适用于使用 React Apollo 的 useMutation 挂钩

Question

我使用的是最新的 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 制作的:)

Answer 1

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

基本上，突变 PUBLISH_BLOG_MUTATION 中缺少 published，所以我只需要将其更改为：

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

就这些了‍♂️

optimisticResponse 不适用于使用 React Apollo 的 useMutation 挂钩

optimisticResponse not working for useMutation hook using React Apollo

javascript

reactjs

react-apollo

optimistic-ui