0

我正在使用最新的 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

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

基本上，在上面的示例中，我有一个自is以来的button所有文本。Not yetitem.publishedfalse

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

乐观的 UI 将确保它立即切换，但现在它没有。

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

有任何想法吗？

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

它是用 React 和 Prisma2 制作的 :)

4

1 回答 1

0

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

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

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

就这些了‍♂️</p>

于 2019-09-24T07:13:16.657 回答