{"id":1689,"date":"2023-04-18T10:15:42","date_gmt":"2023-04-18T10:15:42","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=1689"},"modified":"2025-09-18T12:23:58","modified_gmt":"2025-09-18T12:23:58","slug":"supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/","title":{"rendered":"Supercharge Your React App with Real-Time GraphQL Subscriptions &#038; Apollo Client"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/2ZVmf14ynTxcmNPq6hGnTb5Hd8z0Gb2BFzH0X3YkITDzeBzBdYEDcMJUlaI5X7q604mcl-tkkHrTOJ5N4dcMZMEBVs0dJOk7peavzzPKrhHZeq4E9pVe9W2_ET62ejVTs-_npZLQzdQy6BtmOEEaDI0\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Modern applications are getting more real-time. Notification updates, chat messaging applications, and financial market updates are all examples of real-time updates in online apps. With a feature called subscriptions, GraphQL makes it simple to create apps with low latency, and real-time updates.<\/p>\n\n\n\n<p>In this blog, we will discuss:<\/p>\n\n\n\n<ul><li>Polling<\/li><li>WebSockets<\/li><li>GraphQL Subscriptions<\/li><li>Apollo Client<ul><li>Features<\/li><li>Community Integrations<\/li><li>Why Apollo Client?<\/li><li>Case Studies<\/li><\/ul><\/li><li>Hands-on<\/li><li>Conclusion<\/li><\/ul>\n\n\n\n<p>There are several ways in which we can architect real-time applications. The three most common ways are:<\/p>\n\n\n\n<h2>Polling<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Polling in simple terms is making HTTP calls to a web server at given intervals, let us say 1 second, two seconds, and so on. This architecture is expensive because it will increase the load on the server due to the many requests being made per second. The way HTTP works is that the connection is closed each time the request is finished and another connection is opened when the response is sent from the server to the client.<\/p>\n\n\n\n<h2>WebSockets<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">WebSocket is a computer communication protocol that allows the server and web client to communicate over an open connection. Websockets are full-duplex or bi-directional meaning that information\/data flow is from server to client and vice-versa as soon as the data is received or an event is triggered.<\/p>\n\n\n\n<h2>GraphQL Subscriptions<\/h2>\n\n\n\n<p class=\"has-text-align-justify\"><a href=\"https:\/\/www.workfall.com\/learning\/blog\/building-real-time-apps-with-nestjs-and-graphql-subscriptions\/\">GraphQL Subscriptions<\/a> are the web socket implementation of GraphQL. It is much simplified for you to allow you to focus on the end goal which is receiving real-time data and triggering the subsequent events instead of configuring web socket events from scratch.<\/p>\n\n\n\n<h2>Apollo Client<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Apollo Client is a comprehensive JavaScript framework for managing state, enabling you to handle both local and remote data using GraphQL. With Apollo Client, you can easily manage the state of your application and simplify data fetching, all while leveraging the power and flexibility of GraphQL.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Apollo Client assists you in structuring code in a cost-effective, predictable, and declarative manner that is consistent with modern development practices. The core <em>@apollo\/client<\/em> library includes React integration, while the Apollo community as a whole maintains integrations for additional popular view layers.<\/p>\n\n\n\n<h3>Features of Apollo Client<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/_VDeWTGErKxHZO7mwVy_-E8KaWnmVuZ1NK5X8xrUGiRq6XKuoXZ_VwER_oHWObOttlWcgXU30B5gpxjc4U3gAEsXDhXl3fepRn2Xno7QZD7O6rDCtCJqYCzXqRX2KAZY5hRbLMsSaVkwucnBQ80Lodk\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<ul><li><strong>Declarative Data Fetching:<\/strong> Allows you to write a query and retrieve data without having to manually track loading states.<\/li><\/ul>\n\n\n\n<ul><li><strong>Outstanding Developer Experience:<\/strong> Take advantage of useful TypeScript, Chrome \/ Firefox devtools, and VS Code tooling.<\/li><\/ul>\n\n\n\n<ul><li><strong>Designed for Modern React:<\/strong> Use the most recent React features, such as hooks.<\/li><\/ul>\n\n\n\n<ul><li><strong>Adopt Apollo in Stages: <\/strong>Drop Apollo into any JavaScript app and integrate it feature by feature.<\/li><\/ul>\n\n\n\n<ul><li><strong>Universal Compatibility:<\/strong> Use any build configuration and any GraphQL API.<\/li><\/ul>\n\n\n\n<ul><li><strong>Community-driven:<\/strong> Share your knowledge with thousands of GraphQL developers.<\/li><\/ul>\n\n\n\n<h3>Community Integrations<\/h3>\n\n\n\n<p>Apart from React, many other libraries and languages are supported by Apollo Client:<\/p>\n\n\n\n<ul><li>JavaScript<ul><li>Angular<\/li><li>Vue<\/li><li>Svelte<\/li><li>Solid.js<\/li><li>Ember<\/li><li>Meteor (thanks to DDP-Apollo)<\/li><\/ul><\/li><li>Web Components<ul><li>Apollo Elements<\/li><\/ul><\/li><li>Native Mobile<ul><li>Native iOS with Swift<\/li><li>Native Android with Java and Kotlin<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3>Why Choose Apollo Client?<\/h3>\n\n\n\n<ul><li>Obtaining declarative data<\/li><li>Bringing together local and remote data<\/li><li>Caching with no configuration<\/li><li>A robust environment<\/li><\/ul>\n\n\n\n<h3>Apollo Client Case Studies<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">Apollo Client has become a trusted choice for a wide range of companies, from large enterprises to startups, as they seek to power their most critical web and native applications. Many organizations have experienced the benefits of transitioning to GraphQL and Apollo, such as simplified workflows for their engineers and improved products for their customers.&nbsp;<\/p>\n\n\n\n<ul><li><strong>The New York Times:<\/strong> Discover how The New York Times transitioned from Relay to Apollo and added features such as SSR and persistent queries in their app.<\/li><\/ul>\n\n\n\n<ul><li><strong>Express:<\/strong> Apollo&#8217;s simple pagination assisted the Express eCommerce team in improving important product pages.<\/li><\/ul>\n\n\n\n<ul><li><strong>Major League Soccer: <\/strong>By switching from Redux to Apollo for state management, MLS was able to remove almost all of its Redux code.<\/li><\/ul>\n\n\n\n<ul><li><strong>Expo: <\/strong>By using Apollo to develop their React Native app, the Expo engineers were able to focus on refining their product rather than writing data-fetching algorithms.<\/li><\/ul>\n\n\n\n<ul><li><strong>KLM:<\/strong> Discover how the KLM team used GraphQL and Apollo to scale their Angular app.<\/li><\/ul>\n\n\n\n<h2>Hands-on<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/FMvWCcSbUXgkAhOPOGsck4Pu8zqp1snxUeTN6eJmK9DYsLF57KTy7Gkn8vbceMK9eJGB1wcRXQ_hXcmJI2TkSKR9V3tXaIvew0YG0GxjDIrxbbbSh7DjOGw2e3woorcT-dvQhYPYKGGUiQP5e4bqSfU\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, we are going to create a real-time application that enables all users with access to the application to receive real-time updates when a new user registers into the system. The backend for this is already tackled in a separate blog.<\/p>\n\n\n\n<p>The code used in this blog is found at <a href=\"https:\/\/github.com\/workfall\/workfall-react-graphql\">https:\/\/github.com\/workfall\/workfall-react-graphql<\/a>&nbsp;<\/p>\n\n\n\n<h3>Folder Structure<\/h3>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/1ZbXQPl6UdCi7l0l-ouzmttQRMSvwpG5bTDT96SADpqRN1F99Q0xsSvLNjdeEJr1PzC-Nx5pvuCoo-F3p-4CcGN5pIXtNGbQf6fqQSs1zbRR_YWClUig1gn0BoFeBmvQOXxh8dFi-sLeQDYR3Q9oq0I\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\" width=\"522\" height=\"1026\"\/><\/figure>\n\n\n\n<h3>Installations<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">First of all, create a new React application using the command:<\/p>\n\n\n\n<p class=\"has-text-align-justify\"><code>npx create-react-app &lt;project_name&gt; --template typescript<\/code><\/p>\n\n\n\n<p>Next, we install the Apollo client using the command:<\/p>\n\n\n\n<p><code>yarn add @apollo\/client graphql, yarn add subscriptions-transport-ws<\/code><\/p>\n\n\n\n<p>And finally,<\/p>\n\n\n\n<p><code>yarn add formik yup @types\/yup.<\/code><\/p>\n\n\n\n<h3>Code<\/h3>\n\n\n\n<p><code>index.tsx(1):<\/code><\/p>\n\n\n\n<p>In this file, we shall do all the necessary configurations required by the Apollo GraphQL client.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">We begin by declaring links to the two transport layers which are HTTP and WebSockets. We shall then wrap the root component with the Apollo provider.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/PN0311H7fGQKgtkjA0CHwwpXx4yH9EeB0n3GMtRv1F9ZlvKhAR43hYOqG17I56h6MFnW-nA_slnKJZTofNMe3BGBBsnicGoBFY3vklMjSoNLQWg1QQLsJ6dt4kDdEvDHTkmHuoz13knwUHIOiY2pGL0\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p><code>index.tsx(2):<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/kKby6CHAx7cS1R9cHQoPzffBSvJCIoDdxw11on4tCR40HvzdmwUFIxTk2YtdEfcmCNEqB2jdhLU-72TxEA7FwIN366oOduno9LtV3Ubab9UewbL6xUJ_kJSqZdQpYl0H5JlT8rGhMIKxzAt3jsSDN3I\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p><code>App<strong>.<\/strong>tsx<strong>:<\/strong><\/code><\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this file, we shall declare routing for the application, the index route will be the list of users displayed in a table. We shall have another route to navigate to the New User Registration form.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/4IAjBtFRsqXjGb9kBGNNXAjH9L6krkUkBd3NpM4VTniO6gPJEL9P6pkKQocDd67-omoqgZTFRViNsNTNQtq8xydg0uIFJWNS9N0Rs7XTjDk4xSZ8Yo116Y_CFJPVfxWJC2A-u1ijHX7A7AJJtt-TLO8\" alt=\"\"\/><\/figure>\n\n\n\n<p><code>ListUsers.tsx(1):<\/code><\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this file, we shall write all the logic pertaining to the fetching of the data. We shall start by declaring our GraphQL operations.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this case, we have a query operation to fetch all the available users and then we have a subscription operation to listen to any new users that will be registered into the system.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/aeyrBw_XF4w27Lh6YqG6EWTDJK1n-KWCB35NgWJAEvC2Oz2I6XajnGoPEkNQw6hUbdzLQXlj5a0acAjOU3fd0j3XSfFXAl6THGD4TrceIVQdZg0yoTXGiO30CccS4-rQ1fCdrIUdvbGmitz0-QlUwC4\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p><code>ListUsers.tsx(2):<\/code><\/p>\n\n\n\n<p class=\"has-text-align-justify\">The Apollo client provides us with several hooks to simplify working with GraphQL operations. In the file below, we are utilizing the useQuery and useSubscription hooks.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The useQuery hook will perform a query operation and then you can destructure data, error, and loading from the hook execution results.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this example, we have used empty curly braces to scope the variables from the useSubscription hook to avoid running into issues with shadow variables.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/efYXp5obdhO6TDe7vNRbUwqlXAJKXxUpDZU98caGN9iBqkUrFvHwKmCY-Nx0EdfWeFT3aznVjZ3b8mUy8Qk-hLJA5pqq36neEk9Pz2kU3uXlL-G8ymVqPWQ2y8QZCVpV1SjiVeS6C_F0WYlSh_nl2Ek\" alt=\"\"\/><\/figure>\n\n\n\n<p><code>Table.tsx(1):<\/code><\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this file, we shall write a reusable and generic table component. The table will receive data passed to it in terms of rows and columns and render it in the UI.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/i25Mk4vX-55DWT3L-tTO2YbPbJPvkirWCKGkhwLtr2Gn56IXfmmN7QyEviYq4og3WaoBrOCFmAzQ5zCfJEuogQmMM-4UsdZwvIsVUbMn6Ow9EhZjH2_bTAsVecOHPKXlfPkHPT7czdnGClZaFbQFLjo\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p><code>Table.tsx(2):<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/gWcYBx0TfxsrgIMuG4M-QNE_m5VYY40Ri1KGFZvnp3bTbgDwnk0OB3gRU0omw3wvyb2OD1ZJMUlvvIfkOb1UVQYHvpEQ6c6O_bHjec2wYo1mYDtWP-viYHuO0Zb5mEx4ftTnU98H6_KGeOuAo02uGY0\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p><code>Table.module.css:<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/TBVtyMt9Eb6c1tx7zlDTM7tjb2vKsXadEIe6N2mvpuXy34XYNENLeYGqT-5mIB6o2ovNy55GpQWVfbsAmI7gNP3OrF9qWNAmWPVNbjUY-2lq6-hyBu2Pf3ZTP-jr_-eix-wEfGR1N5csx1yOzM3L4Z8\" alt=\"\"\/><\/figure>\n\n\n\n<p><code>CreateUserForm.tsx(1):<\/code><\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this file, we shall write a form component to enable us to send user registration information to our GraphQL server.<\/p>\n\n\n\n<p>For form validation, we shall use Yup in conjunction with Formik.<\/p>\n\n\n\n<p>To send a create user request to the server, we perform a mutation operation coupled with the required payload.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/zB4PcLAOkOaEWY_6Of2HHHkuPnmhjHfuUDaDmnhQ8OoXDy8feuA_m8vaO7k5Dqcx3kQdoUdG_fReThVuQMCe3m93_-zjEfDHhJbitv5ZfztlUKsh8fK3yrrr4pdI4icJq2IVRT0IDQDCPfQFLPykRlo\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<p><code>CreateUserForm.tsx(2):<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/Vj1_uz71mNf18PbbWFvRD-S7v0VdUamXkjPuC4vw7EM8RaZT4udxXN-dsogD4avGN9mrYmsqFKW-LdrBBeIj3Yi76HxGdwGHXwfnIJpYvZJSxtqUXpaFsnucE-wQGqY4Y1T6RYeEFDzem8I88xxp0ik\" alt=\"\"\/><\/figure>\n\n\n\n<p><code>CreateUserForm.module.css(1):<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/AwyYAqTMnEEElA2vwhsKHiSwR6rObItQccy9gDxS5i-997BZdSaKX7k-mpg5efCadBaM6aReeQdDvnSzvii5fWUGbC1AqUr8sz2j-EAQ-y3rFn3S-0f43UEHEzxQD4C0CQD4wY_TtMm-hY2Mp57reVg\" alt=\"\"\/><\/figure>\n\n\n\n<p><code>CreateUserForm.module.css(2):<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/C0CHfBt25dWrK3s0SZ2GIRtpfCePp0S_LXAFyJJk-EliYxDTjCuDWN74UtvrTqUd2cwJjgZsZqvyecDNB3BxcrZU8lC0pE7apLD6NQiCSqovz9JtcswrtzwwbfMdMn9dgBvnDlPq9m0_vu_l8v5W1jA\" alt=\"\"\/><\/figure>\n\n\n\n<p>We shall test this application on a split screen to see how the data is updated in real-time.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Last, once the client will register a user and you will notice that the new user is automatically added to the existing list.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/uSt-GOqqFS_Ev0drOxNku3_F50DmA2nYizeWBSPL8iuc2S4DSu2NeLudHFutnqNo70tHUubmpqQ8DEHrDrMHjMtqBix630dZsK6ZoH0g5jtmJljQC-ssevz3t0VU78XtpaHwaWJQ7SPIixecUDJ51P0\" alt=\"React App with Real-Time GraphQL Subscriptions &amp; Apollo Client\"\/><\/figure>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, we demonstrated how we can create a real-time application using React and GraphQL subscriptions and the GraphQL Apollo client. In addition to this, we also learned how to perform other GraphQL operations such as queries and mutations on the React client.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Last but not least, we saw how we can configure the Apollo client with React by providing the link chain in terms of the HTTP link and Websocket link.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">GraphQL subscriptions are a good choice for using Websockets without dealing with the pain of creating your own WebSocket transport layer. We will come up with more such use cases in our upcoming blogs.<\/p>\n\n\n\n<p><strong>Meanwhile\u2026<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">If you are a React &amp; GraphQL Lover and want to explore more about the above topics, here are a few of our blogs for your reference:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/building-real-time-apps-with-nestjs-and-graphql-subscriptions\/\">Building Real-Time Apps with NestJS and GraphQL Subscriptions<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-manage-state-in-a-react-application-using-redux\/\">How to Manage State in a React Application Using Redux?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-build-a-hybrid-app-using-react-native\/\">How to Build a Hybrid App using React Native?<\/a><\/li><\/ul>\n\n\n\n<p>Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.<\/p>\n\n\n\n<p><strong>Keep Exploring -&gt; Keep Learning -&gt; Keep Mastering&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">At <a href=\"https:\/\/www.workfall.com\/\">Workfall<\/a>, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you\u2019re looking to work with global clients, build cutting-edge products, and make big bucks doing so, give it a shot at <a href=\"https:\/\/www.workfall.com\/partner\/\">workfall.com\/partner<\/a> today!<\/p>\n\n\n<style type=\"text\/css\"><\/style><section id='' \n                class='helpie-faq accordions faq-toggle open-first groupSettings-498__enabled' \n                data-collection='' \n                data-pagination='0' \n                data-search='0' \n                data-pagination-enabled='0'\n                role='region'\n                aria-label='FAQ Section'\n                aria-live='polite'><h3 class=\"collection-title\">Frequently Asked Questions:<\/h3><article class=\"accordion \"><div class='helpie-faq-row'><div class='helpie-faq-col helpie-faq-col-12' ><ul><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2783\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2783\"\r\n                data-id=\"post-2783\" \r\n                data-item=\"hfaq-post-2783\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q: What problems do GraphQL Subscriptions solve compared to polling or plain HTTP?<\/div><\/div><div id=\"accordion-content-post-2783\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2783\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> Subscriptions allow clients to receive real-time updates over WebSockets, so you don\u2019t need to make repeated HTTP requests at intervals. This reduces server load, latency, and improves user experience.<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2784\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2784\"\r\n                data-id=\"post-2784\" \r\n                data-item=\"hfaq-post-2784\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q: How do I set up Apollo Client to handle both queries\/mutations and subscriptions in React?<\/div><\/div><div id=\"accordion-content-post-2784\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2784\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> You use two different links: an HTTP link for queries\/mutations and a WebSocket link for subscriptions. Then wrap your React app in <\/span><span style=\"font-weight: 400\">ApolloProvider<\/span><span style=\"font-weight: 400\">, use hooks like <\/span><span style=\"font-weight: 400\">useQuery<\/span><span style=\"font-weight: 400\"> for queries and <\/span><span style=\"font-weight: 400\">useSubscription<\/span><span style=\"font-weight: 400\"> for real-time updates.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2785\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2785\"\r\n                data-id=\"post-2785\" \r\n                data-item=\"hfaq-post-2785\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q: What libraries\/packages are needed for subscriptions in this setup?<\/div><\/div><div id=\"accordion-content-post-2785\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2785\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> According to the tutorial: <\/span><span style=\"font-weight: 400\">@apollo\/client<\/span><span style=\"font-weight: 400\">, <\/span><span style=\"font-weight: 400\">graphql<\/span><span style=\"font-weight: 400\">, and a WebSocket transport library such as <\/span><span style=\"font-weight: 400\">subscriptions-transport-ws<\/span><span style=\"font-weight: 400\">. Also tools like Formik\/Yup for form validation are used in the example.<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2786\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2786\"\r\n                data-id=\"post-2786\" \r\n                data-item=\"hfaq-post-2786\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q: What\u2019s the folder or component structure in the example app?<\/div><\/div><div id=\"accordion-content-post-2786\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2786\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> There\u2019s a React app with components like a form to create new users, a list component showing users, and a table UI. The app uses a React Router for navigating between list view and form view. Subscription logic is placed in a component listening for new user registration events.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2787\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2787\"\r\n                data-id=\"post-2787\" \r\n                data-item=\"hfaq-post-2787\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q: What are some likely pitfalls when using subscriptions in React + Apollo?<\/div><\/div><div id=\"accordion-content-post-2787\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2787\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400\">Ensuring you unsubscribe properly when components unmount.<\/span><\/li>\n<li><\/li>\n<li><span style=\"font-weight: 400\">Handling WebSocket reconnection or dropped connections.<\/span>&nbsp;<\/li>\n<li><span style=\"font-weight: 400\">Keeping the client cache in sync when subscription events occur.<\/span>&nbsp;<\/li>\n<li><span style=\"font-weight: 400\">Making sure backend supports subscriptions and has a matching schema.<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><\/li>\n<\/ul>\n<\/div><\/li><\/ul><\/div><\/div><\/article><\/section>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> Modern applications are getting more real-time. Notification updates, chat messaging applications, and financial market updates are all examples of real-time updates in online apps. With a feature called subscriptions, GraphQL makes it simple to create apps with low latency, and real-time updates. In this blog, we will discuss: Polling WebSockets GraphQL Subscriptions Apollo Client Features [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1690,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[288],"tags":[426,164,427,342,163,276,55,6],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Supercharge Your React App with Real-Time GraphQL Subscriptions &amp; Apollo Client - The Workfall Blog<\/title>\n<meta name=\"description\" content=\"Want to how to add real-time functionality to your React app using GraphQL subscriptions and Apollo Client? Then this blog is for you!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Supercharge Your React App with Real-Time GraphQL Subscriptions &amp; Apollo Client - The Workfall Blog\" \/>\n<meta property=\"og:description\" content=\"Want to how to add real-time functionality to your React app using GraphQL subscriptions and Apollo Client? Then this blog is for you!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/\" \/>\n<meta property=\"og:site_name\" content=\"The Workfall Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/workfall\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-18T10:15:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-18T12:23:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@workfall\" \/>\n<meta name=\"twitter:site\" content=\"@workfall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Workfall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\",\"name\":\"Workfall - Hire #Kickass Coders On Demand\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/workfall\/\",\"https:\/\/www.linkedin.com\/company\/workfall\/\",\"https:\/\/facebook.com\/workfall\",\"https:\/\/twitter.com\/workfall\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"contentUrl\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"width\":400,\"height\":400,\"caption\":\"Workfall - Hire #Kickass Coders On Demand\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"name\":\"The Workfall Blog\",\"description\":\"#Tech #Remote #Jobs\",\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#primaryimage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png\",\"width\":1200,\"height\":628,\"caption\":\"Supercharge Your React App with Real-Time GraphQL Subscriptions & Apollo Client\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#webpage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/\",\"name\":\"Supercharge Your React App with Real-Time GraphQL Subscriptions & Apollo Client - The Workfall Blog\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#primaryimage\"},\"datePublished\":\"2023-04-18T10:15:42+00:00\",\"dateModified\":\"2025-09-18T12:23:58+00:00\",\"description\":\"Want to how to add real-time functionality to your React app using GraphQL subscriptions and Apollo Client? Then this blog is for you!\",\"breadcrumb\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learning.workfall.com\/learning\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Supercharge Your React App with Real-Time GraphQL Subscriptions &#038; Apollo Client\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#webpage\"},\"author\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\"},\"headline\":\"Supercharge Your React App with Real-Time GraphQL Subscriptions &#038; Apollo Client\",\"datePublished\":\"2023-04-18T10:15:42+00:00\",\"dateModified\":\"2025-09-18T12:23:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#webpage\"},\"wordCount\":1306,\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png\",\"keywords\":[\"Apollo Client\",\"graphql\",\"GraphQL Subscriptions\",\"js\",\"react\",\"reactjs\",\"webdevelopment\",\"workfall\"],\"articleSection\":[\"Backend Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\",\"name\":\"Workfall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"caption\":\"Workfall\"},\"sameAs\":[\"https:\/\/www.workfall.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Supercharge Your React App with Real-Time GraphQL Subscriptions & Apollo Client - The Workfall Blog","description":"Want to how to add real-time functionality to your React app using GraphQL subscriptions and Apollo Client? Then this blog is for you!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/","og_locale":"en_US","og_type":"article","og_title":"Supercharge Your React App with Real-Time GraphQL Subscriptions & Apollo Client - The Workfall Blog","og_description":"Want to how to add real-time functionality to your React app using GraphQL subscriptions and Apollo Client? Then this blog is for you!","og_url":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/","og_site_name":"The Workfall Blog","article_publisher":"https:\/\/facebook.com\/workfall","article_published_time":"2023-04-18T10:15:42+00:00","article_modified_time":"2025-09-18T12:23:58+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@workfall","twitter_site":"@workfall","twitter_misc":{"Written by":"Workfall","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization","name":"Workfall - Hire #Kickass Coders On Demand","url":"https:\/\/learning.workfall.com\/learning\/blog\/","sameAs":["https:\/\/www.instagram.com\/workfall\/","https:\/\/www.linkedin.com\/company\/workfall\/","https:\/\/facebook.com\/workfall","https:\/\/twitter.com\/workfall"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","contentUrl":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","width":400,"height":400,"caption":"Workfall - Hire #Kickass Coders On Demand"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website","url":"https:\/\/learning.workfall.com\/learning\/blog\/","name":"The Workfall Blog","description":"#Tech #Remote #Jobs","publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#primaryimage","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png","width":1200,"height":628,"caption":"Supercharge Your React App with Real-Time GraphQL Subscriptions & Apollo Client"},{"@type":"WebPage","@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#webpage","url":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/","name":"Supercharge Your React App with Real-Time GraphQL Subscriptions & Apollo Client - The Workfall Blog","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#primaryimage"},"datePublished":"2023-04-18T10:15:42+00:00","dateModified":"2025-09-18T12:23:58+00:00","description":"Want to how to add real-time functionality to your React app using GraphQL subscriptions and Apollo Client? Then this blog is for you!","breadcrumb":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learning.workfall.com\/learning\/blog\/"},{"@type":"ListItem","position":2,"name":"Supercharge Your React App with Real-Time GraphQL Subscriptions &#038; Apollo Client"}]},{"@type":"Article","@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#article","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#webpage"},"author":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a"},"headline":"Supercharge Your React App with Real-Time GraphQL Subscriptions &#038; Apollo Client","datePublished":"2023-04-18T10:15:42+00:00","dateModified":"2025-09-18T12:23:58+00:00","mainEntityOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#webpage"},"wordCount":1306,"publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/supercharge-your-react-app-with-real-time-graphql-subscriptions-apollo-client\/#primaryimage"},"thumbnailUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png","keywords":["Apollo Client","graphql","GraphQL Subscriptions","js","react","reactjs","webdevelopment","workfall"],"articleSection":["Backend Development"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a","name":"Workfall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","caption":"Workfall"},"sameAs":["https:\/\/www.workfall.com"]}]}},"jetpack_featured_media_url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2.png","jetpack-related-posts":[{"id":1684,"url":"https:\/\/learning.workfall.com\/learning\/blog\/building-real-time-apps-with-nestjs-and-graphql-subscriptions\/","url_meta":{"origin":1689,"position":0},"title":"Building Real-Time Apps with NestJS and GraphQL Subscriptions","date":"April 6, 2023","format":false,"excerpt":"Real-time applications are important in several instances. Especially in a scenario whereby immediate feedback is important such as messaging apps and IoT apps. Let\u2019s imagine a case in IoT whereby a smoke detector needs to relay information to water sprinklers in a burning building. This information has to be in\u2026","rel":"","context":"In &quot;Backend Development&quot;","img":{"alt_text":"Building Real-Time Apps with NestJS and GraphQL Subscriptions","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/04\/Cover-Images_Part2-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":523,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-an-api-endpoint-to-provision-a-dynamodb-table-using-aws-appsync-part-1\/","url_meta":{"origin":1689,"position":1},"title":"How to create an API endpoint to provision a DynamoDB table using AWS AppSync? (Part 1)","date":"November 10, 2021","format":false,"excerpt":"AppSync is an AWS-managed GraphQL layer that is built on the benefits of GraphQL and adds a few more cool features to its web and mobile SDKs. AppSync is the best of GraphQL with less complexity than before, which works out great for Serverless applications. You can refer to our\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"AWS AppSync - Integration with React Application","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/CoverImages_1200x628px-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1680,"url":"https:\/\/learning.workfall.com\/learning\/blog\/create-a-no-code-graphql-server-using-hasura-and-postgresql\/","url_meta":{"origin":1689,"position":2},"title":"Create a No-code GraphQL Server Using Hasura and PostgreSQL","date":"March 28, 2023","format":false,"excerpt":"To handle CRUD, authorization, and business logic, backend developers frequently need to write several lines of code. All of this code must be tested, debugged, and maintained for the duration of the project. This consumes a significant amount of time that developers could be used to create new features. This\u2026","rel":"","context":"In &quot;Backend Development&quot;","img":{"alt_text":"No-code GraphQL Server Using Hasura and PostgreSQL","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/03\/Cover-Images_Part2-1-3.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2477,"url":"https:\/\/learning.workfall.com\/learning\/blog\/manage-the-state-of-a-complex-application-by-integrating-redux-with-react\/","url_meta":{"origin":1689,"position":3},"title":"Manage the State of a Complex Application by Integrating Redux with React","date":"January 3, 2024","format":false,"excerpt":"Navigating the complexities of state management is pivotal for controlling an application's data, user interactions, and overall behavior. In this blog, we will explore step-by-step implementation of how to seamlessly manage state across multiple components by integrating Redux with React. Let\u2019s start! In this blog, we will cover: What is\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Manage the State of a Complex Application by Integrating Redux with React","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2024\/01\/Tech-Blogs-Cover-Images_Part3.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1671,"url":"https:\/\/learning.workfall.com\/learning\/blog\/use-surrealdb-to-persist-data-with-rocket-rest-api\/","url_meta":{"origin":1689,"position":4},"title":"Use SurrealDB to Persist Data with Rocket REST API","date":"March 21, 2023","format":false,"excerpt":"Databases are essential in web development for organizing data in various forms and shapes (both structured and unstructured). Their ultimate goal is for the stored data to be easily retrievable, updated, queried, and generally administered via a graphical user interface (GUI), dashboard, or even command line interface (CLI). We can\u2026","rel":"","context":"In &quot;Backend Development&quot;","img":{"alt_text":"SurrealDB","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/03\/Cover-Images_Part2-1-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2480,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-develop-a-micro-frontend-application-with-react\/","url_meta":{"origin":1689,"position":5},"title":"How to Develop a Micro-Frontend Application With React?","date":"January 9, 2024","format":false,"excerpt":"Discover the basics of micro-frontend development in our new blog. We'll guide you through creating lively apps with React, explaining the perks, structure, and smart practices for micro-frontends. It's like solving a web puzzle \u2014 simple, effective, and fun. Let's get started! In this blog, we will cover: What are\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Develop a Micro-Frontend Application With React?","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2024\/01\/Tech-Blogs-Cover-Images_Part3-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1689"}],"collection":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/comments?post=1689"}],"version-history":[{"count":4,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1689\/revisions"}],"predecessor-version":[{"id":2789,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1689\/revisions\/2789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media\/1690"}],"wp:attachment":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media?parent=1689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/categories?post=1689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/tags?post=1689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}