{"id":21244127,"url":"https://github.com/aaronksaunders/ionicv4-graphql-link-state","last_synced_at":"2026-05-07T02:33:10.659Z","repository":{"id":139353004,"uuid":"149048033","full_name":"aaronksaunders/ionicv4-graphql-link-state","owner":"aaronksaunders","description":"Example showing how to manage state using graphql in local state","archived":false,"fork":false,"pushed_at":"2018-09-22T18:18:58.000Z","size":354,"stargazers_count":0,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-16T22:44:33.052Z","etag":null,"topics":["angular-cli","apollo-boost","apollo-link-state","graphql","ionic-framework","javascript","link-state"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-17T00:26:05.000Z","updated_at":"2018-09-17T04:20:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"34f30aea-3e83-42b3-b2a8-524c7952dc23","html_url":"https://github.com/aaronksaunders/ionicv4-graphql-link-state","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaronksaunders/ionicv4-graphql-link-state","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionicv4-graphql-link-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionicv4-graphql-link-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionicv4-graphql-link-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionicv4-graphql-link-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/ionicv4-graphql-link-state/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionicv4-graphql-link-state/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32720138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-cli","apollo-boost","apollo-link-state","graphql","ionic-framework","javascript","link-state"],"created_at":"2024-11-21T01:16:48.708Z","updated_at":"2026-05-07T02:33:10.645Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ionicv4-graphql-link-state\nExample showing how to manage state using graphql in local state\n\n---\n\nI am updating the documentation right now but you can follow along with each step by clicking on each branch\n\n- [Step One - Getting Started](https://github.com/aaronksaunders/ionicv4-graphql-link-state/tree/step-one)\n- [Step One - Lets Make Some Queries](https://github.com/aaronksaunders/ionicv4-graphql-link-state/tree/step-two)\n- [Completed App](https://github.com/aaronksaunders/ionicv4-graphql-link-state)\n\n---\n\n## Getting Started\n\ngo to your terminal and install the required dependencies.\n\n```\nnpm install apollo-angular-boost graphql\n```\n\nWe will setup the apollo client in the `app.module.ts`\n\n```javascript\nimport { HttpClientModule } from \"@angular/common/http\";\nimport {\n  ApolloBoostModule,\n  ApolloBoost,\n  InMemoryCache\n} from \"apollo-angular-boost\";\n```\n\nMake sure to add the new modules imported to the `import` section of `@NgModule`\n\n```javascript\nimports: [\n  BrowserModule,\n  HttpClientModule,      // provides HttpClient for HttpLink\n  IonicModule.forRoot(),\n  AppRoutingModule,\n  ApolloBoostModule      // module for apollo boost/client\n],\n```\n\nThen you actually create the client. Add the code below to the `AppModule` class. We set up the client but we also create a cache to hold the data/state that will be utilized throughout the application.\n\n```javascript\nconstructor( apolloBoost: ApolloBoost ) {\n\n  const cache = new InMemoryCache(); // \u003c= created cache\n  \n  apolloBoost.create({\n    clientState: {\n      cache,\n      defaults: {} ,  // default settings for state\n      resolvers: {}   // the resolvers for the gql queries/mutations\n    }\n  })\n }\n```\n\n## Setting up the first interaction with GraphQL\n\nCreate a new file called graphql-info.ts and past this code in the file. I have added comments to the code below so . hopefully it makes sense what we have done.\n\n```javascript\nimport { Apollo, gql } from 'apollo-angular-boost';\n\n\nexport default {\n  defaults: {\n    users: []       // we will keep a list of users here\n  },\n  resolvers: {\n    Query: {  },    // code for queries goes here\n    Mutation: { }   // code for mutations goes here\n  }\n}\n\n//\n// QUERIES\n//\nexport const ADD_USER_QUERY = gql` `;   // add a user to the local state\n\nexport const GET_USERS_QUERY = gql``;   // get a list of all users in local state\n```\nNext lets go back to the app module and connect this new module and import the last peices to get the apollo client connected to the application.\n\nfirst import the new module `graphql-info`\n\n```javascript\nimport GRAPH_QL from \"./graphql-info\";\n```\n\nthen connect the default state and the resolvers to the client by changing this\n```javascript\n  apolloBoost.create({\n    clientState: {\n      cache,\n      defaults: {} ,  // default settings for state\n      resolvers: {}   // the resolvers for the gql queries/mutations\n    }\n  })\n```\n\nto this\n\n```javascript\n  apolloBoost.create({\n    clientState: {\n      cache,\n      defaults: GRAPH_QL.defaults ,   // default settings for state\n      resolvers: GRAPH_QL.resolvers   // the resolvers for the gql queries/mutations\n    }\n  })\n\n```\n## Lets Make Some Queries\nTo get some data we need to set some data, so lets change our defaults to actually hold a user. For the user we will hve an `id`, `name` and we need to specify the type to keep graphql happy `__typename`\n\n```javascript\n  defaults: {\n    users: [\n      { \"id\": \"100\", \"name\":\"Aaron\", \"__typename\" :\"User\" },\n      { \"id\": \"101\", \"name\":\"Andrea\", \"__typename\" :\"User\" }\n    ]\n  },\n```\n\nWe have data now lets do the query, we are assuming a basic understanding of graphql queries here. So this is how you query all of the users; add this query to the section marked in the file `graphql-info.ts`\n\n```javascript\nexport const GET_USERS_QUERY = gql`\n  query getUsers {\n    users  @client {\n      id\n      name\n    }\n  }\n  `;\n  ```\n  Next we are going to use the GraphQL Tools from Apollo so please load that up in your Chrome browser or follow direction to load it based on the browser you are using. We will use these tools to execute queries for testing purposes. [Download tools by clicking this link](https://github.com/apollographql/apollo-client-devtools)\n\n  \n  when you open the tool, be sure to have the \"Load From Cache\" checked, we are using the cache here.\n\n  next copy the actual query that you just pasted into the file... ONLY the query text.. Also notice the `@client` decorated added to the query, that means check the cache for the query.\n\n  ```javascript\n  query getUsers {\n    users  @client {\n      id\n      name\n    }\n  }\n  ```\n\n![/readme.images/Screen Shot 2018-09-16 at 11.59.08 PM.png](https://github.com/aaronksaunders/ionicv4-graphql-link-state/blob/step-two/readme.images/tools-image-1.png)\n\npaste the query into the devtool open in chrome.\n\nNext we are going to run the query and get the list of users from the local state of the application, what we set in the default section when initializing the client.\n\n![/Screen Shot 2018-09-16 at 11.59.08 PM.png](https://github.com/aaronksaunders/ionicv4-graphql-link-state/blob/step-two/readme.images/tools-image-2.png)\n\nyou can see we have the complete list of the users from the client\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fionicv4-graphql-link-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Fionicv4-graphql-link-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fionicv4-graphql-link-state/lists"}