时间戳

首页 > 解决方案 > 尝试更新缓存 apollo 并绘制 UI 时出错

reactjs - 尝试更新缓存 apollo 并绘制 UI 时出错

问题描述

我开始使用 apollo、react 和 graphql 开发应用程序，我创建了一个表格来捕获车辆品牌并在表格中显示它们。当您第一次启动页面时，它很好地显示了表格，但是当我尝试记录一个新品牌时，它会抛出以下图像。请我需要帮助。

在此处输入图像描述

这是我的代码

import React, { Component, Fragment } from 'react';
import { Query, Mutation } from 'react-apollo';
import BrandItem from '../models/BrandItem';
import * as BrandService from '../services/BrandService';

export class Brand extends Component {
  render() {
    let input;

    return (
      <div className="divform">
        <Mutation mutation={BrandService.ADD_BRAND}
          update={(cache, { data: { addBrand } }) => {
            const { brands } = cache.readQuery({ query: BrandService.BRAND_QUERY });
            cache.writeData({
              query: BrandService.BRAND_QUERY,
              data: { brands: brands.concat([addBrand]) },
            });
          }}
        >
          {
            (addBrand, { data }) => (
              <form onSubmit={e => {
                e.preventDefault();
                addBrand({ variables: { description: input.value } });
                console.log(data);
                input.value = '';
              }}>
                <label htmlFor="description">Description</label>
                <input type="text" id="description" name="description" required ref={node => { input = node; }} />
                <input type="submit" value="Send" />
              </form>
            )
          }

        </Mutation>
        <div>
          <Fragment>
            <Query query={BrandService.BRAND_QUERY}>
              {
                ({ loading, error, data }) => {
                  if (loading) return <div><h4>loading....</h4></div>
                  if (error) console.log(error);

                  return <Fragment>
                    <table>
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        {
                          data.brands.map(brand => (
                            <BrandItem key={brand.id} brand={brand} />
                          ))
                        }
                      </tbody>
                    </table>
                  </Fragment>
                }
              }
            </Query>
          </Fragment>
        </div>
      </div>
    )
  }
}

export default Brand

我究竟做错了什么？

谢谢

标签： reactjsgraphqlbrowser-cacheapollo

解决方案

你唯一使用地图的地方就是这里。

{
    data.brands.map(brand => (
        <BrandItem key={brand.id} brand={brand} />
    ))
}

因此，data.brands 必须为 null 或未定义。我会检查查询BrandService.BRAND_QUERY并检查它是否在查询中定义了品牌。如果您添加了一个console.log(data)来仔细检查响应的结构，这可能会有所帮助。

如果在某些情况下没有品牌退回是有道理的。最简单的方法就是这样做。

{
    data.brands && data.brands.map(brand => (
        <BrandItem key={brand.id} brand={brand} />
    ))
}

但是，最好的做法取决于您的应用程序。

推荐阅读