{"id":20177,"date":"2020-07-03T10:56:23","date_gmt":"2020-07-03T10:56:23","guid":{"rendered":"https:\/\/www.aceinfoway.com\/blog\/?p=20177"},"modified":"2022-04-04T12:52:13","modified_gmt":"2022-04-04T12:52:13","slug":"apollo-graphql-in-angular","status":"publish","type":"post","link":"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular","title":{"rendered":"A Guide to work with GraphQL(Apollo Client) in Angular"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_37 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title\">Table of Contents<\/p>\r\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular\/#How_to_work_with_GraphQL_and_Apollo_in_Angular\" title=\"How to work with GraphQL and Apollo in Angular?\">How to work with GraphQL and Apollo in Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular\/#Take-Away\" title=\"Take-Away\">Take-Away<\/a><\/li><\/ul><\/nav><\/div>\r\n<div  class=\"fusion-fullwidth fullwidth-box nonhundred-percent-fullwidth\"  style='background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left:30px;'><div class=\"fusion-builder-row fusion-row \"><div  class=\"fusion-layout-column fusion_builder_column fusion_builder_column_1_1  fusion-one-full fusion-column-first fusion-column-last wireframe-post-single 1_1\"  style='margin-top:0px;margin-bottom:20px;'>\n\t\t\t<div class=\"fusion-column-wrapper\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;\"  data-bg-url=\"\">\n\t\t\t\t<p>Excessive data fetching has always been a point of concern for the app developers, and are in a lookout for a solution that can fetch the right amount of data.<strong> GraphQL &#8211; a revolutionary query language for web API<\/strong>, is one such contribution made by <strong>Facebook<\/strong>. GraphQL has come out as a game-changer in the application development process, enhancing the communication between front-end as well as the back-end of the application.<\/p>\n<p>Being strongly typed, fast, self-documented as well as dissociated with the storage, GraphQL empowers the developers to include it at any stage of the app development process, without interrupting the existing database. The simplicity of GraphQL, making it more comprehensible as well as easy to learn,\u00a0 is also one of the major reasons which have made it the choice of many tech pioneers like<strong> Facebook, Shopify, StackShare, Twitter, etc..<\/strong> Unlike other query languages, GraphQL does not use the complicated text string instead utilizes the object structure to manage data.<\/p>\n<p><strong>For Example,\u00a0<\/strong><\/p>\n<p>If you want to fetch the details of a book from the database. The SQL query for the action will be like:<\/p>\n<div class=\"code_contain\"><code>SELECT name, author, genre, price FROM books<\/code><\/div>\n<p>To write it in the GraphQL, the query seems more understandable, written the same as the structure of the object.<\/p>\n<div class=\"code_contain\"><code>{<br \/>\nBook{<br \/>\nbatch_no.<br \/>\nname<br \/>\nauthor<br \/>\ngenre<br \/>\nprice<br \/>\n}<br \/>\n}<\/code><\/div>\n<p>However, the challenges do not end with the data fetching &#8211; front end, back end and cache data management are also important.\u00a0 A client can help you here, allowing you to execute the API on it and track its performance. Among the various available clients, Apollo, with an interpretative data fetching approach and smart caching, proves to be one of the best clients used for API development.<br \/>\nConsidering its efficacies, pairing Apollo with the GraphQL comes out as an extremely productive combination. This combination expedites the development process, empowering the developers to add or remove fields in the API directly, instead of writing a huge amount of boilerplate code. Apollo works for various JavaScript platforms such as\u00a0 Angular, React, etc. for App development. Let\u2019s take up Angular and check out how it works on GraphQL and Apollo.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_work_with_GraphQL_and_Apollo_in_Angular\"><\/span>How to work with GraphQL and Apollo in Angular?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Apollo liberates the applications from finding ways to load data, managing everything at its end. User Interface requests the data through GraphQL, and then Apollo manages the rest by fetching, caching, and availing the data to the API. Let\u2019s check out the steps to create an Angular application using Apollo and GraphQL.<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>The first and foremost step is to install the Angular Command Line Interface and then set up the GraphQL server or<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Launch it from the Apollo Launchpad.<\/p>\n<div class=\"code_contain\"><code>import { makeExecutableSchema } from 'graphql-tools';<br \/>\nconst typeDefs = `<br \/>\ntype Query {<br \/>\nallBooks: [Book]\nbook(batch no.: Int!): Book<br \/>\n},<br \/>\ntype Book {<br \/>\nbatch_no.: Int<br \/>\nname: String<br \/>\nauthor: String<br \/>\ngenre: String<br \/>\nprice: Int<br \/>\n};<br \/>\nvar coursesData = [<br \/>\n{<br \/>\nbatch_no.: 1,<br \/>\nname: 'The Complete Book of C++',<br \/>\nauthor: 'Herbert Schildt',<br \/>\ngenre: programming<br \/>\nprice: 6.57 USD<br \/>\n},<br \/>\n{<br \/>\nbatch_no.: 2,<br \/>\nname: 'Learning Python',<br \/>\nauthor: 'Mark Lutz',<br \/>\ngenre: programming<br \/>\nprice: 8.17 USD<br \/>\n},<br \/>\n{<br \/>\nbatch_no.: 3,<br \/>\nname: 'Java in a Nutshell',<br \/>\nauthor: 'David Flanagan',<br \/>\ngenre: programming<br \/>\nprice: 7.57 USD<br \/>\n}<br \/>\n];<br \/>\nvar getBook = function(root, {batch no.}) {<br \/>\nreturn BooksData.filter(Book =&gt; {<br \/>\nreturn Book.batch_no. === batch_no.;<br \/>\n})[0];<br \/>\n};<br \/>\nvar getAllBooks = function() {<br \/>\nreturn BooksData;<br \/>\n}<br \/>\nconst resolvers = {<br \/>\nQuery: {<br \/>\nallBooks: getAllBooks,<br \/>\nBook: getBook,<br \/>\n},<br \/>\n};<br \/>\nexport const schema = makeExecutableSchema({<br \/>\ntypeDefs,<br \/>\nresolvers,<br \/>\n});<\/code><\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"padding-top: 15px;\">Create an Angular project.<\/li>\n<li style=\"padding-bottom: 15px;\">After creating the project, add Angular Apollo Client with the command:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"code_contain\"><code>ng add apollo-angular<\/code><\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"padding-top: 15px;\">Once the command is executed, import the following dependencies such as-\n<ul>\n<li>Angular Ng Module<\/li>\n<li>App Component<\/li>\n<li>Apollo Module<\/li>\n<li>Graphql-tag<\/li>\n<li>HttpClientModule<\/li>\n<li>Apollo-angular-link-http<\/li>\n<li>InMemoryCache<\/li>\n<\/ul>\n<\/li>\n<li style=\"padding-bottom: 15px; padding-top: 15px;\">Add the address of your GraphQL server within the GraphQL module file.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"code_contain\"><code>const uri = '.... URL of GraphQL server...';\u00a0<\/code><\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"padding-bottom: 15px; padding-top: 15px;\">Update the constructor with a link and cache-\n<ul>\n<li style=\"padding-bottom: 15px;\"><strong>Link: <\/strong>Link creates a HttpLink() method, which connects to the GraphQL server.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"code_contain\"><code>\u00a0link: httpLink.create({uri: '[URL]'})<\/code><\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"padding-bottom: 15px;\"><strong>Cache: <\/strong>Cache creates an instance of InMemoryCache(), which can be used to store data for API.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"code_contain\"><code>cache: new InMemoryCache()\u00a0<\/code><\/div>\n<p>When an object is created, the constructor creates a network connection with the GraphQL server.<\/p>\n<div class=\"code_contain\"><code>import { BrowserModule } from '@angular\/platform-browser';<br \/>\nimport { NgModule } from '@angular\/core';<br \/>\nimport { ApolloModule, Apollo } from 'apollo-angular';<br \/>\nimport { HttpClientModule } from '@angular\/common\/http';<br \/>\nimport { InMemoryCache } from 'apollo-cache-inmemory';<br \/>\nimport { AppComponent } from '.\/app.component';<br \/>\nimport { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';<br \/>\n@NgModule({<br \/>\ndeclarations: [<br \/>\nAppComponent<br \/>\n],<br \/>\nimports: [<br \/>\nBrowserModule,<br \/>\nHttpClientModule,<br \/>\nApolloModule,<br \/>\nHttpLinkModule<br \/>\n],<br \/>\nproviders: [],<br \/>\nbootstrap: [AppComponent]\n})<br \/>\nexport class AppModule {<br \/>\nconstructor(apollo: Apollo, httpLink: HttpLink) {<br \/>\napollo.create({<br \/>\nlink: httpLink.create({uri: '[URL]'}),<br \/>\ncache: new InMemoryCache()<br \/>\n});<br \/>\n}<br \/>\n}<\/code><\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"padding-top: 15px;\">Once you have set up the Apollo client and established the connection, import the necessary components required in your application such as CSS file, HTML file, type definition, etc., you can retrieve data and provide it to the user.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Code for Type definition-<\/p>\n<div class=\"code_contain\"><code>export type Book= {<br \/>\nbatch_no.;<br \/>\nname: string;<br \/>\nauthor: string;<br \/>\ngenre: string;<br \/>\nprice: number;<br \/>\n}<br \/>\nexport type Query = {<br \/>\nallBooks: Book[];<br \/>\n}<\/code><\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"padding-top: 15px; padding-bottom: 15px;\">To retrieve the details of Books from the GraphQL through Apollo Client, you can use the following code:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"code_contain\"><code>export class ListComponent implements OnInit {<br \/>\nBooks: Observable&lt;Book[]&gt;;<br \/>\nconstructor(private apollo: Apollo) { }<br \/>\nngOnInit() {<br \/>\nthis.Books = this.apollo.watchQuery({ \u00a0 \/\/watchQuery eecutes the query<br \/>\nquery: gql`<br \/>\nquery allBooks {<br \/>\nallBooks {<br \/>\nbatch_no.<br \/>\nname<br \/>\nauthor<br \/>\ngenre<br \/>\nprice<br \/>\n} } `<br \/>\n})<br \/>\n.valueChanges<br \/>\n.pipe(<br \/>\nmap(result =&gt; result.data.allBooks)<br \/>\n);<br \/>\n}<br \/>\n}<\/code><\/div>\n<p>Now, you can modify the HTML code of your Angular App and link the Apollo client in the code. Execute the code and check out the result in the browser.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Take-Away\"><\/span>Take-Away<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>GraphQL is the modern way of interacting with the database and Apollo Client makes the interaction even better, providing a perfect environment to execute the API seamlessly, by fetching and storing API data at its end. GraphQL is packed with various unique features:<\/p>\n<ul>\n<li>A Declarative approach of fetching data from the server.<\/li>\n<li>Handles complex networking activities at its end.<\/li>\n<li>Liberates you from making multiple HTTP requests for data.<\/li>\n<li>Works on the tight coupling of data dependencies and the view layer of the application, enabling you to control the User Interface code and the data in parallel.<\/li>\n<\/ul>\n<p>Apollo Client, on the other hand,\u00a0 not only handles the responses generated by the GraphQL server but also caches them for future references. Some highlighting features that make it a perfect fit for GraphQL and JavaScript applications.<\/p>\n<ul>\n<li>Incrementally adaptable at any stage of the app development.<\/li>\n<li>Easy to use and understand.<\/li>\n<li>Smaller in size.<\/li>\n<li>Community-driven.<\/li>\n<\/ul>\n<p>By now, you might have understood the importance of GraphQL and Apollo in the Application development process and how to incorporate it into your project. However, if still on the fence, reach out to us and get your queries resolved. Or <a href=\"https:\/\/www.aceinfoway.com\/Angular-JS\" target=\"blank\">Hire an Angular developer<\/a> and handover your hassle to us.<\/p>\n<div class=\"blog_bottom_banner\"><a href=\"https:\/\/www.aceinfoway.com\/Contact-Us\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-20179 size-full\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graphql_cta.jpg\" alt=\" Are you struggling with the data over fetching between client and server?\" width=\"836\" height=\"273\" \/><\/a><\/div>\n<div class=\"fusion-clearfix\"><\/div>\n\n\t\t\t<\/div>\n\t\t<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":769419,"featured_media":20178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[439,436,438,437,440],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Apollo GraphQL: A Definitive Guide to Work with Apollo Angular<\/title>\r\n<meta name=\"description\" content=\"Get the most value out of Apollo Client, Here is the guide for you, use it with one of its view layer GraphQL in Angular.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Apollo GraphQL: A Definitive Guide to Work with Apollo Angular\" \/>\r\n<meta property=\"og:description\" content=\"Get the most value out of Apollo Client, Here is the guide for you, use it with one of its view layer GraphQL in Angular.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular\" \/>\r\n<meta property=\"og:site_name\" content=\"Ace Infoway\" \/>\r\n<meta property=\"article:published_time\" content=\"2020-07-03T10:56:23+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2022-04-04T12:52:13+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\r\n\t<meta property=\"og:image:height\" content=\"524\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Vipul Patel\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vipul Patel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular\",\"url\":\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular\",\"name\":\"Apollo GraphQL: A Definitive Guide to Work with Apollo Angular\",\"isPartOf\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#website\"},\"datePublished\":\"2020-07-03T10:56:23+00:00\",\"dateModified\":\"2022-04-04T12:52:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551\"},\"description\":\"Get the most value out of Apollo Client, Here is the guide for you, use it with one of its view layer GraphQL in Angular.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.aceinfoway.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Guide to work with GraphQL(Apollo Client) in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#website\",\"url\":\"https:\/\/www.aceinfoway.com\/blog\/\",\"name\":\"Ace Infoway\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.aceinfoway.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551\",\"name\":\"Vipul Patel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g\",\"caption\":\"Vipul Patel\"},\"description\":\"Vipul is a passionate techie and loves to get involved in high pace projects which involves creating business optimized applications, business processes, and strategies to maximize business growth with a clear focus on expertise in SaaS domain.\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apollo GraphQL: A Definitive Guide to Work with Apollo Angular","description":"Get the most value out of Apollo Client, Here is the guide for you, use it with one of its view layer GraphQL in Angular.","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:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular","og_locale":"en_US","og_type":"article","og_title":"Apollo GraphQL: A Definitive Guide to Work with Apollo Angular","og_description":"Get the most value out of Apollo Client, Here is the guide for you, use it with one of its view layer GraphQL in Angular.","og_url":"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular","og_site_name":"Ace Infoway","article_published_time":"2020-07-03T10:56:23+00:00","article_modified_time":"2022-04-04T12:52:13+00:00","og_image":[{"width":1024,"height":524,"url":"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg","type":"image\/jpeg"}],"author":"Vipul Patel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vipul Patel","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular","url":"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular","name":"Apollo GraphQL: A Definitive Guide to Work with Apollo Angular","isPartOf":{"@id":"https:\/\/www.aceinfoway.com\/blog\/#website"},"datePublished":"2020-07-03T10:56:23+00:00","dateModified":"2022-04-04T12:52:13+00:00","author":{"@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551"},"description":"Get the most value out of Apollo Client, Here is the guide for you, use it with one of its view layer GraphQL in Angular.","breadcrumb":{"@id":"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.aceinfoway.com\/blog\/apollo-graphql-in-angular#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.aceinfoway.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Guide to work with GraphQL(Apollo Client) in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.aceinfoway.com\/blog\/#website","url":"https:\/\/www.aceinfoway.com\/blog\/","name":"Ace Infoway","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.aceinfoway.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551","name":"Vipul Patel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g","caption":"Vipul Patel"},"description":"Vipul is a passionate techie and loves to get involved in high pace projects which involves creating business optimized applications, business processes, and strategies to maximize business growth with a clear focus on expertise in SaaS domain."}]}},"rttpg_featured_image_url":{"full":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg",1024,524,false],"landscape":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg",1024,524,false],"portraits":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg",1024,524,false],"thumbnail":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-150x150.jpg",150,150,true],"medium":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-300x154.jpg",300,154,true],"large":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-1024x524.jpg",1024,524,true],"1536x1536":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg",1024,524,false],"2048x2048":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg",1024,524,false],"blog-large":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-669x272.jpg",669,272,true],"blog-medium":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-320x202.jpg",320,202,true],"portfolio-full":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-940x400.jpg",940,400,true],"portfolio-one":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-540x272.jpg",540,272,true],"portfolio-two":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-460x295.jpg",460,295,true],"portfolio-three":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-300x214.jpg",300,214,true],"portfolio-five":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-177x142.jpg",177,142,true],"recent-posts":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-700x441.jpg",700,441,true],"recent-works-thumbnail":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-66x66.jpg",66,66,true],"200":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-200x102.jpg",200,102,true],"400":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-400x205.jpg",400,205,true],"600":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-600x307.jpg",600,307,true],"800":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql-800x409.jpg",800,409,true],"1200":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/07\/graph-ql.jpg",1024,524,false]},"rttpg_author":{"display_name":"Vipul Patel","author_link":"https:\/\/www.aceinfoway.com\/blog\/author\/vipul-umretiya"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/www.aceinfoway.com\/blog\/advanced-technologies\" rel=\"category tag\">Advanced Technologies<\/a>","rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/20177"}],"collection":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/users\/769419"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/comments?post=20177"}],"version-history":[{"count":27,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/20177\/revisions"}],"predecessor-version":[{"id":21371,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/20177\/revisions\/21371"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/media\/20178"}],"wp:attachment":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/media?parent=20177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/categories?post=20177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/tags?post=20177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}