Apollo/graphQL: как использовать оптимистичный пользовательский интерфейс для мутации вложенного реагирующего компонента?

Question

Как показано ниже, я получаю свои данные в моем приложении nextJS в pages/article.js используя запрос graphQL. Эти данные передаются другому компоненту реакции, который дает мне список флажков.

Выбор флажка вызывает мутацию для сохранения идентификатора выбранных флажков в БД. Для обновления контента я использую refetchQueries снова вызвать основной запрос, который передаст данные в текущий компонент.

Пока все работает. Теперь я хотел бы получить этот материал в реальном времени, используя оптимистичный интерфейс - что вызывает у меня некоторые проблемы...

Замена refetchQueries с

update: (store, { data: { getArticle } }) => {
  const data = store.readQuery({
    query: getArticle,
    variables: {
      id: mainID
    }
  })
  console.log(data)
}

подводит меня к ошибке TypeError: Cannot read property 'kind' of undefined который исходит от readQuery,

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

страниц /article.js

import Article from '../components/Article'

class ArticlePage extends Component {
  static async getInitialProps (context, apolloClient) {
    const { query: { id }, req } = context
    const initProps = { }

    // ...

    return { id, ...initProps }
  }

  render () {
    const { id, data } = this.props
    const { list } = data
    return (
      <Article
        mainID={id}
        list={list}
      />
    )
  }
}

export default compose(
  withData,
  graphql(getArticle, {
    options: props => ({
      variables: {
        id: props.id
      }
    })
  })
)(ExtendedArticlePage)

компоненты /Article.js

import { getArticle } from '../graphql/article'
import { selectMutation } from '../graphql/selection'

export class Article extends Component {
  checkboxToggle (id) {
    const { mainID, checkboxSelect } = this.props

    checkboxSelect({
      variables: {
        id
      },
      refetchQueries: [{
        query: getArticle,
        variables: {
          id: mainID
        }
      }],

    })
  }

  render () {
    const { list } = this.props
    return (
      list.map(l => {
        return (<Checkbox onClick={this.checkboxToggle.bind(this, l.id)} label={l.content} />)
      }
    )
  }
}

export default compose(
  graphql(selectMutation, { name: 'checkboxSelect' })
)(Article)

Answer 1

У вас проблема с изменением теней в вашем коде обновления, похоже, вы используете то же имя getArticle как для вашего запроса, так и для результата мутации, вложенного в data,

Вот почему ваш звонок readQuery терпит неудачу, query параметры, которые вы должны предоставить, разрешают результат мутации, а не фактический запрос, следовательно, TypeError: Cannot read property 'kind' of undefined,

Вам просто нужно присвоить свой запрос другому идентификатору, например getQueryArticle,