Apollo/graphQL: 如何使用 optimistic UI 来改变嵌套的 React 组件？

Question

如下所示，我使用 graphQL 查询在 pages/article.js 的 nextJS 应用程序中获取数据。这些数据被传递到另一个反应组件，它给了我一个复选框列表。

选择一个复选框是调用一个突变来将所选复选框的 ID 存储在数据库中。为了更新内容，我使用 refetchQueries 再次调用 主查询 ，这会将数据向下传递到当前组件。

到目前为止一切正常。现在我想使用 optimistic UI 实时获取这些东西 - 这让我遇到了一些问题...

将 refetchQueries 替换为

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

让我遇到来自 readQuery.

的错误 TypeError: Cannot read property 'kind' of undefined

我不明白我做错了什么。这只是乐观的第一部分 UI..

pages/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)

components/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

您的更新代码中存在变量隐藏问题，您的查询和嵌套在 data.[=16 中的变异结果似乎使用了相同的名称 getArticle =]

这就是您对 readQuery 的调用失败的原因，您需要提供的 query 参数解析突变结果而不是实际查询，因此 TypeError: Cannot read property 'kind' of undefined.

您只需使用另一个标识符来命名您的查询，例如 getQueryArticle。

Apollo/graphQL: 如何使用 optimistic UI 来改变嵌套的 React 组件？

Apollo/graphQL: How to use optimistic UI for a mutation of a nested react component?

javascript

reactjs

react-apollo

nextjs

optimistic-ui