Question

我正在使用最新的Apollo挂钩（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并在每次单击时保持切换。

乐观的用户界面将确保立即切换，但现在不会。

原始突变的AFAIK响应与2 optimisticResponse一起放在__typename中，所以我就是这么做的。

有什么想法吗？

我还在Github上制作了复制量最小的开源软件→https://github.com/deadcoder0904/test-optimistic-ui

它是在React＆Prisma2中制成的：）

Answer 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
    }
  }
`

仅此而已

optimisticResponse无法使用useReact Apollo的Mutation挂钩

1 个答案: