Keep queries in sync with the backend by polling for new data
In this lesson, we'll look at adding the pollInterval option when making queries. This instructs Apollo to continuously poll the backend and check for changes. We'll also explore some of the pitfalls of this approach, and how we might want to use a larger poll interval, and apply it on queries that do not return large chunks of data.
Instructor: [0:00] Our app is becoming more and more connected, and I am now sharing this workspace with other people in my family. You'll notice that, even though I start out with three categories up here in the dropdown, if I now refresh the page, I get a new category appearing, Childcare, which was added by somebody else.
[0:20] After a few seconds, if I refresh the page yet again, I can see a new category, Work, and it's been added here as well. They've all been added in the background while I was using the app. If others can add categories on different devices, I'd like to update this page automatically to reflect the changes and not have to make the user refresh themselves and check if there are updates.
[0:45] In my Select category dropdown, I will pass the pollInterval option to my useQuery hook, and I'm going to check for results every second. Back in my app, I can see all these new network requests coming up every second now, each one trying to query for new categories. If I open the Categories dropdown up here, after a few seconds, I'll see the Childcare category appearing.
[1:16] You notice how this dropdown only refreshed when the data actually changed. Even though you're making all these network requests here in the background, your UI doesn't have to suffer. If I keep the Edit categories component open and the dropdown, and if you watch both at the same time, after a few seconds, you'll see the new Work category appearing in both of them. That's cool.
[1:41] If you remember from a previous lesson, all components making the exact same query with the same variables will get pointed to the same location in the cache, in this case, this category's query. Even if my dropdown is the only component polling the categories for changes, the Edit categories component will get those changes for free because they're both looking at the same location in the cache. It's just another example of how Apollo keeps your data consistent by default.
[2:10] In summary, if you have queries that update often on the backend and return you small pieces of data, you can add a pollInterval to them. This will cause Apollo to refetch their data every second.
[2:23] This is one of the simplest and safest solutions you can apply for this use case, but in production apps, maybe try and use a larger pollInterval so you don't hit your backend with so many frequent requests. You have to make sure that the query you're fetching is small. Otherwise, all these network requests can start to slow down your app.
[2:44] In my case, I know the categories list won't grow by that much, so I'm not that worried about fetching too much data in the future.