{"id":5650,"date":"2017-11-11T11:47:46","date_gmt":"2017-11-11T11:47:46","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=5650\/"},"modified":"2022-07-01T17:28:34","modified_gmt":"2022-07-01T17:28:34","slug":"apollo-graphql-client-makes-api-integration-breeze","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/","title":{"rendered":"Apollo &#8211; The GraphQL client that makes API integration a breeze"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Integrating apps and servers is not an easy task, we all know that. Even with great tools like Alamofire and Retrofit there are still a lot of things to take care of in the app side: different endpoints, encoding \/ decoding JSON strings, API versions, data consistency and so on\u2026<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Recently I have worked in a project with server integration and we had the opportunity to choose new technologies to work with and to try to avoid some of these problems. The choice was a GraphQL server and in the app side the Apollo framework.<\/span><\/p>\n<p><!--more--><\/p>\n<h2><span style=\"font-weight: 400;\">Why GraphQL?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">GraphQL is a query language created by Facebook that is being used in its apps since 2012. The reasons why we chose to use it are:<\/span><\/p>\n<ul>\n<li><b>Flexibility<\/b><span style=\"font-weight: 400;\">: The client decides which data should be available in the result. This avoids unused data in the server response.<\/span><\/li>\n<li><b>Based on a schema<span style=\"font-weight: 400;\">: There is a well defined data model available, so the client knows exactly how this data will be returned and how to perform the queries.<\/span><\/b><\/li>\n<li><b>Easy to learn<\/b><span style=\"font-weight: 400;\">: The query language is very similar to JSON, so it&#8217;s syntax is easy to understand.<\/span><\/li>\n<li><b>API Documentation<span style=\"font-weight: 400;\">: Since GraphQL exposes a schema to the clients, it&#8217;s easy to create documentation and make query validation to avoid mistakes when fetching data. There are a lot of IDEs that help to create queries and explore available data.<\/span><\/b><\/li>\n<li><strong>Can be implemented in any language<\/strong><span style=\"font-weight: 400;\">: GraphQL is available for many different languages and can work beside REST with no problem, it&#8217;s basically another way to expose data. It also works with any database and it&#8217;s up to the developer to decide what is available in the schema and what is not.<\/span><\/li>\n<li><strong>Mutations<\/strong><span style=\"font-weight: 400;\"><strong>:<\/strong> GraphQL provides a nice and well structured way to perform data updates in server.<\/span><\/li>\n<li><strong>Open Source<\/strong><span style=\"font-weight: 400;\">: GraphQL has a big community working on it. More about GraphQL can be found in the <\/span><a href=\"http:\/\/graphql.org\/learn\/\"><span style=\"font-weight: 400;\">official documentation<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here is a small example of a GraphQL query:<\/span><\/p>\n<pre>query GetPostById {\n  Post(id: \"cj6py4hi614bx01580y11k0go\") {\n    title\n    content\n  }\n}\n\nAnd its response:<\/pre>\n<pre>{\n  \"data\": {\n    \"Post\": {\n      \"title\": \"International Space Station\",\n      \"content\": \"Its first component launched into orbit in 1998.\"\n    }\n  }\n}<\/pre>\n<h2><span style=\"font-weight: 400;\">Why Apollo?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">On the client side, there are different situations that the application has to deal with. However, since GraphQL runs over an HTTP connection and its response is a JSON string, the problems are pretty much the same as REST. But actually, here starts all the magic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apollo is a very nice framework. It provides everything necessary to create requests to the server. It also lies on a GraphQL server schema to make all the parsing, normalization and caching of data a piece of cake. Here are the main reasons to choose it:<\/span><\/p>\n<ul>\n<li><b>Multiplatform<\/b><span style=\"font-weight: 400;\">: Apollo is available for many frontend platforms, including native iOS and Android. All these platforms follow the same concepts and have its own language particularities. So you will feel home when using it in your code. Go to this <\/span><a href=\"https:\/\/www.apollographql.com\/client\/\"><span style=\"font-weight: 400;\">page<\/span><\/a><span style=\"font-weight: 400;\"> to get the official documentation for each one.<\/span><\/li>\n<li><b>Based on a schema<\/b><span style=\"font-weight: 400;\">: Apollo uses the GraphQL schema available in the server to know how data is structured. It allows the parsing to native objects to be automatic and instantaneous.<\/span><\/li>\n<li><b>Normalized Cache<\/b><span style=\"font-weight: 400;\">: Apollo has its own cache. All data fetched from the server is normalized and stored in a local cache. This helps to keep data consistent and always updated through all the UI.<\/span><\/li>\n<li><b>Fetch policies<\/b><span style=\"font-weight: 400;\">: You can easily choose between fetching data from Apollo&#8217;s cache or reaching the server. This way you might avoid unnecessary requests to server.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Next I will show how simple it is to configure Apollo and how easy it is to make queries and use its cache. Also, you&#8217;ll see how it automatically creates typed objects with all data you just fetched.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How Apollo works<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">For example purposes on this post I will use the iOS version in Swift.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Set up Apollo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Setting up Apollo in a project requires a little configuration, but it&#8217;s very simple to do it. For iOS it requires basically the following steps:<\/span><\/p>\n<ol>\n<li><strong>Install Apollo via CocoaPods, Carthage or manually<\/strong><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Install Apollo Codegen via npm<\/strong>:&nbsp;&nbsp;<\/span>This codegen is responsible for generating API.swift file with all structs and queries based on the schema<\/li>\n<li><span style=\"font-weight: 400;\"><strong>Set up a build phase<\/strong>:&nbsp;<\/span><span style=\"font-weight: 400;\">This runs the codegen during build time to create the <em>API.swift<\/em> file<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Download GraphQL schema and add it to the Xcode project<\/strong>:&nbsp;&nbsp;<\/span>This is the GraphQL server schema conventionally called schema.json, it should be always updated with server version<\/li>\n<li><strong>Build the project<\/strong><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Add the generated API.swift file to the Xcode project<\/strong>:&nbsp;<\/span><span style=\"font-weight: 400;\">You can <\/span><span style=\"font-weight: 400;\">git ignore<\/span><span style=\"font-weight: 400;\"> this file. It will be generated every time you build the project.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">This is the initial setup to start making queries and mutations on your iOS app. All the setup steps are detailed in Apollo <\/span><a href=\"https:\/\/www.apollographql.com\/docs\/ios\/\"><span style=\"font-weight: 400;\">documentation<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Start performing fetches and mutations<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">With everything up and running we can start performing fetches. To do that you simply create GraphQL queries in a .graphql file. You can create as many files as you want.&nbsp;<\/span><span style=\"font-weight: 400;\">For this example I will be using a very simple API with posts and comments. There is a link for the sample project in the end of this post.<\/span><\/p>\n<p>Ok, now let&#8217;s see what Apollo can do!<\/p>\n<p><span style=\"font-weight: 400;\">First of all we create a .graphql file with the GraphQL query to fetch all posts:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">query AllPosts {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;allPosts {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;...Post<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;}<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<pre><span style=\"font-weight: 400;\">fragment PostObject on Post {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;title<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;content<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">If you build the project now you will see that API.swift file have now a bunch of code. In this code there are swift methods to perform the queries and structs that represent the data returned by the server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The last thing we need before performing a fetch query is the client that accesses the server. To do this we create an instance of Apollo Client. I use a singleton with a unique apollo client to keep a unique cache and use in all code. But let&#8217;s keep it simple for now.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">let url = \"<\/span><span style=\"font-weight: 400;\">https:\/\/my-amazing-api.com\/graphql<\/span><span style=\"font-weight: 400;\">\"<\/span>\n<span style=\"font-weight: 400;\">let apolloClient = ApolloClient(url: url)<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Now we use the auto generated query object as parameter to the fetch method in the client and a callback to deal with the result. This result will already be cached.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">apolloClient.fetch(query: query) { result, error in<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;let posts: [PostObject]? = result?.data?.allPosts.map {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;return $0.fragments.postObject<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;}<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;self.posts = posts ?? []<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">As you can see in the .graphql file I used a fragment called PostObject. Apollo converts this fragment into a struct. The response from server will be mapped into this structs and you can use them directly in your UI code and other parts of the project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also pass to the fetch method a parameter to change the cache policy. There are currently four options:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>returnCacheDataElseFetch<\/strong>:&nbsp;<\/span>Return data from the cache if available, else fetch results from the server<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>fetchIgnoringCacheData<\/strong>:&nbsp;<\/span>Always fetch results from the server<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>returnCacheDataDontFetch<\/strong>:&nbsp;<\/span>Return data from the cache if available, else return nil<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>returnCacheDataAndFetch<\/strong>:&nbsp;<\/span>Return data from the cache if available, and always fetch results from the server<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Using these options <\/span><span style=\"font-weight: 400;\">appropriately can reduce access to network and improve UI response. In the sample project for example I fetch all posts in the list screen. And in the details screen I just used the cached data, so I avoid another request and I guarantee that my fetched data always come from the same place, avoiding inconsistency in the app.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">This is just a small example of what Apollo can do. In the sample project there are also examples of watching queries that helps us to keep UI always updated with the last cache version and also a mutation to perform changes in server data.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">My experience with Apollo started with a few concerns regarding this whole new concept of fetching and manipulating data along with the server. But after a few months using it I can say that I would always choose Apollo for my future projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Apollo project is new and there are already a lot of users. There are a lot of things to come and you can, of course, contribute as its open source. You can check the example code in <\/span><a href=\"https:\/\/github.com\/ricardo0100\/ApolloMission\"><span style=\"font-weight: 400;\">this<\/span><\/a><span style=\"font-weight: 400;\"> GitHub repository.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some resources that might help too:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/dev-blog.apollodata.com\/graphql-vs-rest-5d425123e34b\"><span style=\"font-weight: 400;\">https:\/\/dev-blog.apollodata.com\/graphql-vs-rest-5d425123e34b<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.apollographql.com\/\"><span style=\"font-weight: 400;\">https:\/\/www.apollographql.com\/<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.raywenderlich.com\/158433\/getting-started-graphql-apollo-ios\"><span style=\"font-weight: 400;\">https:\/\/www.raywenderlich.com\/158433\/getting-started-graphql-apollo-ios<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.youtube.com\/channel\/UC0pEW_GOrMJ23l8QcrGdKSw\/videos\"><span style=\"font-weight: 400;\">https:\/\/www.youtube.com\/channel\/UC0pEW_GOrMJ23l8QcrGdKSw\/videos<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Integrating apps and servers is not an easy task, we all know that. Even with great tools like Alamofire and Retrofit there are still a lot of things to take care of in the app side: different endpoints, encoding \/ decoding JSON strings, API versions, data consistency and so on\u2026 Recently I have worked in [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":5665,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432,1162],"tags":[15],"class_list":["post-5650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","category-process","tag-tag-mobile"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Apollo - The GraphQL client that makes API integration a breeze<\/title>\n<meta name=\"description\" content=\"Since GraphQL runs over an HTTP connection and its response is a JSON string, the problems are pretty much the same as REST. And here starts all the magic.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apollo - The GraphQL client that makes API integration a breeze\" \/>\n<meta property=\"og:description\" content=\"Since GraphQL runs over an HTTP connection and its response is a JSON string, the problems are pretty much the same as REST. And here starts all the magic.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-11T11:47:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:28:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"710\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/\"},\"author\":{\"name\":\"Ricardo Gehrke Filho\"},\"headline\":\"Apollo &#8211; The GraphQL client that makes API integration a breeze\",\"datePublished\":\"2017-11-11T11:47:46+00:00\",\"dateModified\":\"2022-07-01T17:28:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/\"},\"wordCount\":1354,\"commentCount\":4,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png\",\"keywords\":[\"Mobile\"],\"articleSection\":[\"Engineering\",\"Process\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/\",\"name\":\"Apollo - The GraphQL client that makes API integration a breeze\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png\",\"datePublished\":\"2017-11-11T11:47:46+00:00\",\"dateModified\":\"2022-07-01T17:28:34+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Ricardo Gehrke Filho\"},\"description\":\"Since GraphQL runs over an HTTP connection and its response is a JSON string, the problems are pretty much the same as REST. And here starts all the magic.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png\",\"width\":2000,\"height\":710,\"caption\":\"apollo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Apollo &#8211; The GraphQL client that makes API integration a breeze\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Ricardo Gehrke Filho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg\",\"caption\":\"Ricardo Gehrke Filho\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/ricardo-3\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apollo - The GraphQL client that makes API integration a breeze","description":"Since GraphQL runs over an HTTP connection and its response is a JSON string, the problems are pretty much the same as REST. And here starts all the magic.","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:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/","og_locale":"en_US","og_type":"article","og_title":"Apollo - The GraphQL client that makes API integration a breeze","og_description":"Since GraphQL runs over an HTTP connection and its response is a JSON string, the problems are pretty much the same as REST. And here starts all the magic.","og_url":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2017-11-11T11:47:46+00:00","article_modified_time":"2022-07-01T17:28:34+00:00","og_image":[{"width":2000,"height":710,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/"},"author":{"name":"Ricardo Gehrke Filho"},"headline":"Apollo &#8211; The GraphQL client that makes API integration a breeze","datePublished":"2017-11-11T11:47:46+00:00","dateModified":"2022-07-01T17:28:34+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/"},"wordCount":1354,"commentCount":4,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png","keywords":["Mobile"],"articleSection":["Engineering","Process"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/","url":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/","name":"Apollo - The GraphQL client that makes API integration a breeze","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png","datePublished":"2017-11-11T11:47:46+00:00","dateModified":"2022-07-01T17:28:34+00:00","author":{"@type":"person","name":"Ricardo Gehrke Filho"},"description":"Since GraphQL runs over an HTTP connection and its response is a JSON string, the problems are pretty much the same as REST. And here starts all the magic.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/11\/Bannerposter.png","width":2000,"height":710,"caption":"apollo"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/apollo-graphql-client-makes-api-integration-breeze\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Apollo &#8211; The GraphQL client that makes API integration a breeze"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Ricardo Gehrke Filho","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg","caption":"Ricardo Gehrke Filho"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/ricardo-3\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=5650"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5650\/revisions"}],"predecessor-version":[{"id":10257,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5650\/revisions\/10257"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/5665"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=5650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=5650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=5650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}