Refetch Data with the Apollo Query Component either Manually or on Timed Intervals

Nik Graf
InstructorNik Graf
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

In this lesson we will first explore how to manually refetch data for an already executed query to receive the latest state of our data.

Later we use polling to refetch the latest state on a timed interval. Polling can be a simple and effective tool to provide an almost real-time experience without the overhead of setting up a WebSocket solution.

Instructor: [00:00] So far, we used data, loading, error from the render prop function of a query component. There are a couple more utilities coming with this object. One of them is refetch. Once invoked, it will rerun the query. Let's give this a try by adding a button to refresh to recipes.

[00:29] Once implemented we add a new item in another browser, switch back to our previous one, and execute the refetch by pressing the button.

[00:48] As expected, we now see the new recipe being added. Other examples of useful utilities coming inside the render prop, a network status, fetch more for pagination, or start and stop polling.

[01:02] That said, the easiest way to achieve polling for new results is using the poll interval prop on the query component itself. By default, it's deactivated, but if you provide a number like 3,000, the component will rerun the query every third second. Again, you want to verify it by adding get another recipe.

[01:29] As you can see, the banana muffin was added. Without web sockets being available, polling can be a simple and effective tool to provide an almost real time experience.

Tomás Francisco
Tomás Francisco
~ 6 years ago

Great tutorial Nik! Render Props pattern seems interesting, but it doesn't seem to scale easily when multiple requests need to be made in the same component. How would you do that? Would HOC be more scalable and improve the code readability in this situation?

Nik Graf
Nik Grafinstructor
~ 6 years ago

Hey @Tomás, some people indeed like the hoc more, but other struggle with it. I think eventually Apollo will be available using React Hooks and that, from my perspective will be a nice option.

Learn Sifnos
Learn Sifnos
~ 6 years ago

@Nik, here you will find two solutions.

@Tomás, I'm scratching my head about this: how come this works: <button onClick={() => refetch()}>Refetch</button> and this doesn't: <button onClick={refetch}>Refetch</button>

chihab
chihab
~ 6 years ago

Thank you @Nik Source code link is broken (on other lessons too). It should be https://github.com/nikgraf/graphql-apollo-client-course/tree/master/lesson-6.

Nik Graf
Nik Grafinstructor
~ 6 years ago

@Sébastien cool, didn't know about this one. Thanks for the hint!

@chihab thanks, just informed someone from the Egghead team so they can fix it.

David Balatero
David Balatero
~ 6 years ago

@Sébastien

I'd imagine it has to do with the fact that onClick will pass an event as the first parameter to the onClick function. Since I'm not sure about the signature of refetch(), it may be that it is expecting a different argument as parameter 1. The best way to ensure that refetch() is cleanly called and not passed anything weird by the browser's onClick semantics is to wrap it in a 0-arg function () => refetch().

Alex Radulescu
Alex Radulescu
~ 5 years ago

Hi @Nik,

Great intro into Graph and Apollo, thanks for it. I would like to second @Alex's point, on updating this course for hooks. This would be super helpful as I believe hooks are the future for React.

Cristian Moreno
Cristian Moreno
~ 3 years ago

I could not understand this with version 3 of apollo, could there be an update to this video?

Nik Graf
Nik Grafinstructor
~ 3 years ago

I could not understand this with version 3 of apollo, could there be an update to this video?

Thanks! Unfortunately I don't have the time right now to do so :(

vamsg007
vamsg007
~ 6 months ago

what a fantastic tutorial series! this is badass

Markdown supported.
Become a member to join the discussionEnroll Today