{"id":21878857,"url":"https://github.com/moduscreateorg/react-native-autocomplete-with-graphql-cache","last_synced_at":"2026-04-13T03:03:28.752Z","repository":{"id":38458318,"uuid":"317989530","full_name":"ModusCreateOrg/react-native-autocomplete-with-graphql-cache","owner":"ModusCreateOrg","description":"Autocomplete mobile application, using GraphQL with NodeJS to handle the server and React Native for the frontend.","archived":false,"fork":false,"pushed_at":"2023-07-19T01:50:11.000Z","size":2621,"stargazers_count":0,"open_issues_count":25,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-23T07:31:51.344Z","etag":null,"topics":["android","graphql","grapql-server","ios","javascript","nodejs","react","react-native"],"latest_commit_sha":null,"homepage":"https://moduscreate.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ModusCreateOrg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2020-12-02T20:57:36.000Z","updated_at":"2021-01-13T13:06:03.000Z","dependencies_parsed_at":"2025-01-26T18:38:48.896Z","dependency_job_id":null,"html_url":"https://github.com/ModusCreateOrg/react-native-autocomplete-with-graphql-cache","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ModusCreateOrg/template","purl":"pkg:github/ModusCreateOrg/react-native-autocomplete-with-graphql-cache","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-native-autocomplete-with-graphql-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-native-autocomplete-with-graphql-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-native-autocomplete-with-graphql-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-native-autocomplete-with-graphql-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ModusCreateOrg","download_url":"https://codeload.github.com/ModusCreateOrg/react-native-autocomplete-with-graphql-cache/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-native-autocomplete-with-graphql-cache/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31737850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T22:19:12.206Z","status":"online","status_checked_at":"2026-04-13T02:00:06.623Z","response_time":93,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["android","graphql","grapql-server","ios","javascript","nodejs","react","react-native"],"created_at":"2024-11-28T08:13:57.149Z","updated_at":"2026-04-13T03:03:28.739Z","avatar_url":"https://github.com/ModusCreateOrg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Autocomplete (GraphQL Cache)\n\n[![MIT Licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](./LICENSE)\n[![Powered by Modus_Create](https://img.shields.io/badge/powered_by-Modus_Create-blue.svg?longCache=true\u0026style=flat\u0026logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIwIDMwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOTguODI0IDE0OS40OThjMCAxMi41Ny0yLjM1NiAyNC41ODItNi42MzcgMzUuNjM3LTQ5LjEtMjQuODEtODIuNzc1LTc1LjY5Mi04Mi43NzUtMTM0LjQ2IDAtMTcuNzgyIDMuMDkxLTM0LjgzOCA4Ljc0OS01MC42NzVhMTQ5LjUzNSAxNDkuNTM1IDAgMCAxIDQxLjEyNCAxMS4wNDYgMTA3Ljg3NyAxMDcuODc3IDAgMCAwLTcuNTIgMzkuNjI4YzAgMzYuODQyIDE4LjQyMyA2OS4zNiA0Ni41NDQgODguOTAzLjMyNiAzLjI2NS41MTUgNi41Ny41MTUgOS45MjF6TTY3LjgyIDE1LjAxOGM0OS4xIDI0LjgxMSA4Mi43NjggNzUuNzExIDgyLjc2OCAxMzQuNDggMCA4My4xNjgtNjcuNDIgMTUwLjU4OC0xNTAuNTg4IDE1MC41ODh2LTQyLjM1M2M1OS43NzggMCAxMDguMjM1LTQ4LjQ1OSAxMDguMjM1LTEwOC4yMzUgMC0zNi44NS0xOC40My02OS4zOC00Ni41NjItODguOTI3YTk5Ljk0OSA5OS45NDkgMCAwIDEtLjQ5Ny05Ljg5NyA5OC41MTIgOTguNTEyIDAgMCAxIDYuNjQ0LTM1LjY1NnptMTU1LjI5MiAxODIuNzE4YzE3LjczNyAzNS41NTggNTQuNDUgNTkuOTk3IDk2Ljg4OCA1OS45OTd2NDIuMzUzYy02MS45NTUgMC0xMTUuMTYyLTM3LjQyLTEzOC4yOC05MC44ODZhMTU4LjgxMSAxNTguODExIDAgMCAwIDQxLjM5Mi0xMS40NjR6bS0xMC4yNi02My41ODlhOTguMjMyIDk4LjIzMiAwIDAgMS00My40MjggMTQuODg5QzE2OS42NTQgNzIuMjI0IDIyNy4zOSA4Ljk1IDMwMS44NDUuMDAzYzQuNzAxIDEzLjE1MiA3LjU5MyAyNy4xNiA4LjQ1IDQxLjcxNC01MC4xMzMgNC40Ni05MC40MzMgNDMuMDgtOTcuNDQzIDkyLjQzem01NC4yNzgtNjguMTA1YzEyLjc5NC04LjEyNyAyNy41NjctMTMuNDA3IDQzLjQ1Mi0xNC45MTEtLjI0NyA4Mi45NTctNjcuNTY3IDE1MC4xMzItMTUwLjU4MiAxNTAuMTMyLTIuODQ2IDAtNS42NzMtLjA4OC04LjQ4LS4yNDNhMTU5LjM3OCAxNTkuMzc4IDAgMCAwIDguMTk4LTQyLjExOGMuMDk0IDAgLjE4Ny4wMDguMjgyLjAwOCA1NC41NTcgMCA5OS42NjUtNDAuMzczIDEwNy4xMy05Mi44Njh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+)](https://moduscreate.com)\n\nAutocomplete mobile application, using GraphQL with NodeJS to handle the server and React Native for the frontend side, here we are going to show how to use and take advantage of the cache api to create a Autocomplete component, cache is a powerful tool that help us reduce resource consumption and improves application performance.\n\n- [Getting Started](#getting-started)\n- [How it Works](#how-it-works)\n- [Modus Create](#modus-create)\n- [Licensing](#licensing)\n\n# Getting Started\n\nFor a better understanding is required to have basic experience with GraphQL and also React Native, now to get started with this project we need to install dependencies to run the back end and also the mobile application\nFirst move to the server folder and run this command\n\n```bash\nnpm install\n```\n\nAfter all dependencies are install let's run our server\n\n```bash\nnpm start\n```\n\nThen let's move to the front end and install dependencies, first open a new terminal and run\n\n```bash\ncd modus-autocomplete/ModusAutocomplete\n```\n\nInstall dependencies:\n\n```bash\nnpm install or yarn install\n```\n\nOnce the dependencies are install, let's start our app, make sure the server is running also\n\n```bash\nyarn run ios\n```\n\n[This is how should look] (https://www.screencast.com/t/hx1yLWIAlPc)\n\n# How it works\n\nThe application is created using for the backend GraphQL and NodeJS and front end we will use React Native, main goal is to use Apollo Client cache api to see the benefits and also learn how we can take advantage of this tool. We will create a backend server with GraphQL, we will consume a rest api [JSONPlaceholder] (https://jsonplaceholder.typicode.com/) to show data, then the mobile app will use the GraphQL service, using Apollo as a client, we will use this client to achieve our goal. \n\n\n# Modus Create\n\n[Modus Create](https://moduscreate.com) is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.\n\n\u003ca href=\"https://moduscreate.com/?utm_source=labs\u0026utm_medium=github\u0026utm_campaign=Autocomplete\"\u003e\u003cimg src=\"https://res.cloudinary.com/modus-labs/image/upload/h_80/v1533109874/modus/logo-long-black.svg\" height=\"80\" alt=\"Modus Create\"/\u003e\u003c/a\u003e\n\u003cbr /\u003e\n\nThis project is part of [Modus Labs](https://labs.moduscreate.com/?utm_source=labs\u0026utm_medium=github\u0026utm_campaign=Autocomplete).\n\n\u003ca href=\"https://labs.moduscreate.com/?utm_source=labs\u0026utm_medium=github\u0026utm_campaign=Autocomplete\"\u003e\u003cimg src=\"https://res.cloudinary.com/modus-labs/image/upload/h_80/v1531492623/labs/logo-black.svg\" height=\"80\" alt=\"Modus Labs\"/\u003e\u003c/a\u003e\n\n# Licensing\n\nThis project is [MIT licensed](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoduscreateorg%2Freact-native-autocomplete-with-graphql-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoduscreateorg%2Freact-native-autocomplete-with-graphql-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoduscreateorg%2Freact-native-autocomplete-with-graphql-cache/lists"}