12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
15 : 06 : 04 : 51
Become a member
to unlock all features

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

    Nik GrafNik Graf

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: 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.

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

    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.

    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.

    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.