Error to try update cache apollo and draw the UI - reactjs

Question

I am starting in the development of applications with apollo, react and graphql, I have created a form to capture brands of vehicle and show them in a table. When you start the page for the first time, it shows the table well, but when I try to record a new brand it throws me the following image. Please I need help.
this is my code
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
what am I doing wrong?
Thanks

Answer 1

the only place you use map is here.
{
data.brands.map(brand => (
<BrandItem key={brand.id} brand={brand} />
))
}
Therefore, data.brands must be null or undefined.
I would check the query BrandService.BRAND_QUERY and check it has brands defined in the query. It may help if you added a console.log(data) to double check the structure of the response.
If it makes sense that there are no brands returned in some cases. The simplest way to do that would be to do.
{
data.brands && data.brands.map(brand => (
<BrandItem key={brand.id} brand={brand} />
))
}
However the best thing to do depends on your app.