1233 |

Create Message

1234 |

(this.form = ref)} 1236 | onSubmit={e => this.handleSubmit(e)} 1237 | > 1238 |

1239 | Message: 1240 |

1241 |           </div>
1242 |           <button type="submit">Submit Message</button>
1243 |         </form>
1244 |       </div>
1245 |     )
1246 |   }
1247 | }
1248 | 
1249 | CreateView = graphql(query)(CreateView)
1250 | CreateView = graphql(mutation)(CreateView)  // <-- This is new
1251 | export default CreateView
1252 | ```
1253 | 
1254 | > At this point you should be able to submit a new message and then see it on the ListView
1255 | 
1256 | ## <a name="show-form-errors"></a>Show Form Errors on CreateView
1257 | 
1258 | What if the user enters an empty message? We would like to show some form
1259 | errors. Our schema actually already has this validation in place:
1260 | 
1261 | ```py
1262 | def mutate(root, args, context, info):
1263 |     [...]
1264 |     message = args.get('message', '').strip()
1265 |     if not message:
1266 |         return CreateMessageMutation(
1267 |             status=400,
1268 |             formErrors=json.dumps(
1269 |                 {'message': ['Please enter a message.']}))
1270 |     [...]
1271 | ```
1272 | 
1273 | Note: In the real world you would use a Django form for this and do something
1274 | like this:
1275 | 
1276 | ```py
1277 | def mutate(root, args, context, info):
1278 |   [...]
1279 |   form = CreateMessageForm(data=args)
1280 |   if not form.is_valid():
1281 |       return CreateMessageMutation(
1282 |         status=400, formErrors=json.dumps(form.errors))
1283 | ```
1284 | 
1285 | So validation is already in place, let's update our CreateView so that it
1286 | displays the form errors:
1287 | 
1288 | ```jsx
1289 | // File: ./frontend/src/views/CreateView.js
1290 | 
1291 |   // Add this constructor:
1292 |   constructor(props) {
1293 |     super(props)
1294 |     this.state = {formErrors: null}
1295 |   }
1296 | 
1297 |   // Update this function:
1298 |   handleSubmit(e) {
1299 |     e.preventDefault()
1300 |     let data = new FormData(this.form)
1301 |     this.props
1302 |       .mutate({ variables: { message: data.get('message') } })
1303 |       .then(res => {
1304 |         if (res.data.createMessage.status === 200) {
1305 |           window.location.replace('/')
1306 |         }
1307 |         if (res.data.createMessage.status === 400) {
1308 |           this.setState({
1309 |             formErrors: JSON.parse(res.data.createMessage.formErrors),
1310 |           })
1311 |         }
1312 |       })
1313 |       .catch(err => {
1314 |         console.log('Network error')
1315 |       })
1316 |   }
1317 | 
1318 |   [...]
1319 | 
1320 |   // Update this part of the render() function:
1321 |   <div>
1322 |     <label>Message:</label>
1323 |     <textarea name="message" />
1324 |     {this.state.formErrors &&
1325 |       this.state.formErrors.message &&
1326 |       <p>Error: {this.state.formErrors.message}</p>}
1327 |   </div>
1328 | ```
1329 | 
1330 | > At this point you should be able to submit an empty message and see a form error.
1331 | 
1332 | ## <a name="add-filtering"></a>Add Filtering to ListView
1333 | 
1334 | So far, our `allMessages` query always returns all messages. It would be nice
1335 | if we could add a search bar to our app and filter messages by text.
1336 | graphene-django has some integration with [django-filter](https://github.com/carltongibson/django-filter), so this task
1337 | can be solved easily.
1338 | 
1339 | Note: You can learn more about filtering [here](http://docs.graphene-python.org/projects/django/en/latest/filtering/).
1340 | 
1341 | ```bash
1342 | pip install django-filter
1343 | ```
1344 | 
1345 | ```py
1346 | # File: ./backend/simple_app/schema.py
1347 | [...]
1348 | from graphene_django.filter.fields import DjangoFilterConnectionField
1349 | [...]
1350 | 
1351 | class MessageType(DjangoObjectType):
1352 |     class Meta:
1353 |         model = models.Message
1354 |         filter_fields = {'message': ['icontains']}
1355 |         interfaces = (graphene.Node, )
1356 | [...]
1357 | 
1358 | class Query(graphene.AbstractType):
1359 |     [...]
1360 |     all_messages = DjangoFilterConnectionField(MessageType)
1361 | ```
1362 | 
1363 | > At this point you should be able to run the following query:
1364 | 
1365 | ```graphql
1366 | {
1367 |   allMessages(message_Icontains: "Te") {
1368 |     edges {
1369 |       node {
1370 |         id, message
1371 |       }
1372 |     }
1373 |   }
1374 | }
1375 | ```
1376 | 
1377 | Let's update our ListView and add a search field. We will use the `query-string`
1378 | module to parse the query string in the URL (i.e. `?search=foo`).
1379 | 
1380 | ```bash
1381 | cd ~/django-react-in-docker-microservices/backend/frontend/
1382 | yarn add query-string
1383 | ```
1384 | 
1385 | Notable steps to be taken in the ListView:
1386 | 
1387 | 1. Import the new `queryString` module
1388 | 1. Change the `const query` so that it can take variables (`$search`)
1389 | 1. Add a `handleSearchSubmit` handler that changes the URL via
1390 |    `this.props.history.push` (thanks to react-router)
1391 | 1. Add `queryOptions` and pass in the `search` variable into the query from the
1392 |    props (`props.location.search`), if available
1393 | 
1394 | ```jsx
1395 | // File: ./frontend/src/views/ListView.js
1396 | 
1397 | import React from 'react'
1398 | import { Link } from 'react-router-dom'
1399 | import { gql, graphql } from 'react-apollo'
1400 | import queryString from 'query-string'
1401 | 
1402 | const query = gql`
1403 | query ListViewSearch($search: String) {
1404 |   allMessages(message_Icontains: $search) {
1405 |     edges {
1406 |       node {
1407 |         id, message
1408 |       }
1409 |     }
1410 |   }
1411 | }
1412 | `
1413 | 
1414 | class ListView extends React.Component {
1415 |   handleSearchSubmit(e) {
1416 |     e.preventDefault()
1417 |     let data = new FormData(this.form)
1418 |     let query = `?search=${data.get('search')}`
1419 |     this.props.history.push(`/${query}`)
1420 |   }
1421 | 
1422 |   render() {
1423 |     let { data } = this.props
1424 |     if (data.loading || !data.allMessages) {
1425 |       return <div>Loading...</div>
1426 |     }
1427 |     return (
1428 |       <div>
1429 |         <form
1430 |           ref={ref => (this.form = ref)}
1431 |           onSubmit={e => this.handleSearchSubmit(e)}
1432 |         >
1433 |           <input type="text" name="search" />
1434 |           <button type="submit">Search</button>
1435 |         </form>
1436 |         {data.allMessages.edges.map(item => (
1437 |           <p key={item.node.id}>
1438 |             <Link to={`/messages/${item.node.id}/`}>
1439 |               {item.node.message}
1440 |             </Link>
1441 |           </p>
1442 |         ))}
1443 |       </div>
1444 |     )
1445 |   }
1446 | }
1447 | 
1448 | const queryOptions = {
1449 |   options: props => ({
1450 |     variables: {
1451 |       search: queryString.parse(props.location.search).search,
1452 |     },
1453 |   }),
1454 | }
1455 | 
1456 | ListView = graphql(query, queryOptions)(ListView)
1457 | export default ListView
1458 | ```
1459 | 
1460 | > At this point you should be able to submit searches and see filtered results
1461 | 
1462 | ## <a name="add-pagination"></a>Add Pagination to ListView
1463 | 
1464 | Another very common use-case is pagination and/or endless scrolling.
1465 | graphene-django has cursor-based pagination built-in, so let's give it a try:
1466 | 
1467 | In our schema, we are already using the `DjangoFilterConnectionField` for our
1468 | `allMessages` endpoint. Luckily, that has all the magic built-in, already.
1469 | 
1470 | Our update ListView should look as follows. Notable changes:
1471 | 
1472 | 1. The `const query` now takes to variables (`$message`, and `$endCursor`)
1473 | 1. We extended the query to also return `pageInfo` - this contains information
1474 |    about wether or not there are more pages and how to get there.
1475 | 1. We added a button with a `loadMore()` handler
1476 | 1. The handler calls [`data.fetchMore`](http://dev.apollodata.com/react/pagination.html#fetch-more)
1477 | 1. In the `fetchMore` call, we call the same query but now with one more variable
1478 | 1. We provide an `updateQuery` callback, here we have to decide what to do with
1479 |    the new data (we want to add it to the end of the list of current data)
1480 | 1. In `updateQuery`, we return an object that looks like
1481 |    `this.props.data.allMessages` should look like. This will trigger a component
1482 |    re-render
1483 | 1. We updated `render()` to show a `Load more...` button, as long as there are
1484 |    more items available
1485 | 
1486 | ```jsx
1487 | // File: ./frontend/src/views/ListView.js
1488 | 
1489 | import React from 'react'
1490 | import { Link } from 'react-router-dom'
1491 | import { gql, graphql } from 'react-apollo'
1492 | import queryString from 'query-string'
1493 | 
1494 | const query = gql`
1495 | query ListViewSearch($search: String, $endCursor: String) {
1496 |   allMessages(first: 2, message_Icontains: $search, after: $endCursor) {
1497 |     edges {
1498 |       node {
1499 |         id, message
1500 |       }
1501 |     },
1502 |     pageInfo {
1503 |       hasNextPage,
1504 |       hasPreviousPage,
1505 |       startCursor,
1506 |       endCursor
1507 |     }
1508 |   }
1509 | }
1510 | `
1511 | 
1512 | class ListView extends React.Component {
1513 |   handleSearchSubmit(e) {
1514 |     e.preventDefault()
1515 |     let data = new FormData(this.form)
1516 |     let query = `?search=${data.get('search')}`
1517 |     this.props.history.push(`/${query}`)
1518 |   }
1519 | 
1520 |   loadMore() {
1521 |     let { data, location } = this.props
1522 |     data.fetchMore({
1523 |       query: query,
1524 |       variables: {
1525 |         search: queryString.parse(location.search).search,
1526 |         endCursor: data.allMessages.pageInfo.endCursor,
1527 |       },
1528 |       updateQuery: (prev, next) => {
1529 |         const newEdges = next.fetchMoreResult.allMessages.edges
1530 |         const pageInfo = next.fetchMoreResult.allMessages.pageInfo
1531 |         return {
1532 |           allMessages: {
1533 |             edges: [...prev.allMessages.edges, ...newEdges],
1534 |             pageInfo,
1535 |           },
1536 |         }
1537 |       },
1538 |     })
1539 |   }
1540 | 
1541 |   render() {
1542 |     let { data } = this.props
1543 |     if (data.loading || !data.allMessages) {
1544 |       return <div>Loading...</div>
1545 |     }
1546 |     return (
1547 |       <div>
1548 |         <form
1549 |           ref={ref => (this.form = ref)}
1550 |           onSubmit={e => this.handleSearchSubmit(e)}
1551 |         >
1552 |           <input type="text" name="search" />
1553 |           <button type="submit">Search</button>
1554 |         </form>
1555 |         {data.allMessages.edges.map(item => (
1556 |           <p key={item.node.id}>
1557 |             <Link to={`/messages/${item.node.id}/`}>
1558 |               {item.node.message}
1559 |             </Link>
1560 |           </p>
1561 |         ))}
1562 |         {data.allMessages.pageInfo.hasNextPage &&
1563 |           <button onClick={() => this.loadMore()}>Load more...</button>}
1564 |       </div>
1565 |     )
1566 |   }
1567 | }
1568 | 
1569 | const queryOptions = {
1570 |   options: props => ({
1571 |     variables: {
1572 |       search: queryString.parse(props.location.search).search,
1573 |       endCursor: null,
1574 |     },
1575 |   }),
1576 | }
1577 | 
1578 | ListView = graphql(query, queryOptions)(ListView)
1579 | export default ListView
1580 | ```
1581 | 
1582 | > At this point you should be able to click the `Load more...` button and new items should appear, when there are no more items, the button should disappear. When you click in and out of items from the list, observe the incoming request in the terminal: You will see that loading the same object several times in a row does not trigger new requests, because the data is already in the cache.
1583 | 
1584 | ## <a name="cache-invalidation"></a>Add Cache Invalidation
1585 | 
1586 | First of all, you might have components where you always want to fetch the data
1587 | from the network when the component is mounted. In this case, you can change
1588 | the `fetchPolicy` on the `queryOptions`:
1589 | 
1590 | ```jsx
1591 | # File: ./frontend/src/views/DetailView.js
1592 | 
1593 | const queryOptions = {
1594 |   options: props => ({
1595 |     variables: {
1596 |       id: props.match.params.id,
1597 |     },
1598 |     fetchPolicy: 'network-only',
1599 |   }),
1600 | }
1601 | 
1602 | DetailView = graphql(query, queryOptions)(DetailView)
1603 | ```
1604 | 
1605 | There are other ways to update the cache right after a mutation, see
1606 | [here](http://dev.apollodata.com/react/api-mutations.html#graphql-mutation-options-refetchQueries)
1607 | and
1608 | [here](http://dev.apollodata.com/react/api-mutations.html#graphql-mutation-options-update).
1609 | There is also a project called
1610 | [apollo-cache-invalidation](https://www.npmjs.com/package/apollo-cache-invalidation)
1611 | which is experimental.
1612 | 
1613 | I have not played around enough with cache invalidation to give any guides.
1614 |

--------------------------------------------------------------------------------

{item.title}

Message {data.message.id}

LoginView

Logout

Create Message