optimisticResponse not working for useMutation hook using React Apollo

I'm using the latest Apollo Hooks (v3.1.1)

My code looks like -

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

This is the minimal reproduction I could produce. I don't know why it isn't working.

Basically, I have a button in the example above where all have text Not yet since item.published is false.

When I click it, it sends a request to the server & toggles it & it becomes true changing the text to Published & keeps on toggling whenever I click it.

The optimistic UI will make sure it toggles instantly but right now it doesn't.

AFAIK response from the original mutation is put in optimisticResponse with 2 __typename so I'm doing exactly that.

Any ideas?

I have also made the minimal reproduction Open Source on Github → https://github.com/deadcoder0904/test-optimistic-ui

It's made in React & Prisma2 :)

I found the answer thanks to @zackify on Github.

Basically, published was missing from mutation PUBLISH_BLOG_MUTATION so I just had to change it to:

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

That was all 🤦‍♂️