optimisticResponse не работает для ловушки useMutation с использованием React Apollo

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 и продолжает переключаться всякий раз, когда я щелкаю по нему.

Оптимистичный пользовательский интерфейс сделаетконечно, он переключается мгновенно, но сейчас это не так.

AFAIK-ответ от исходной мутации помещается в optimisticResponse с 2 __typename, поэтому я делаю именно это.

Любойидеи?

Я также сделал минимальное воспроизведение с открытым исходным кодом на Github → https://github.com/deadcoder0904/test-optimistic-ui

Это сделано в React & Prisma2:)

Answer 1

Я нашел ответ благодаря @ zackify на Github.

В основном, published отсутствовал в мутации PUBLISH_BLOG_MUTATION, поэтому мне просто пришлось изменить его на:

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

Это было все 101