An open API service indexing awesome lists of open source software.

https://github.com/moduscreateorg/react-native-autocomplete-with-graphql-cache

Autocomplete mobile application, using GraphQL with NodeJS to handle the server and React Native for the frontend.
https://github.com/moduscreateorg/react-native-autocomplete-with-graphql-cache

android graphql grapql-server ios javascript nodejs react react-native

Last synced: 5 months ago
JSON representation

Autocomplete mobile application, using GraphQL with NodeJS to handle the server and React Native for the frontend.

Awesome Lists containing this project

README

          

# React Native Autocomplete (GraphQL Cache)

[![MIT Licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](./LICENSE)
[![Powered by Modus_Create](https://img.shields.io/badge/powered_by-Modus_Create-blue.svg?longCache=true&style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIwIDMwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOTguODI0IDE0OS40OThjMCAxMi41Ny0yLjM1NiAyNC41ODItNi42MzcgMzUuNjM3LTQ5LjEtMjQuODEtODIuNzc1LTc1LjY5Mi04Mi43NzUtMTM0LjQ2IDAtMTcuNzgyIDMuMDkxLTM0LjgzOCA4Ljc0OS01MC42NzVhMTQ5LjUzNSAxNDkuNTM1IDAgMCAxIDQxLjEyNCAxMS4wNDYgMTA3Ljg3NyAxMDcuODc3IDAgMCAwLTcuNTIgMzkuNjI4YzAgMzYuODQyIDE4LjQyMyA2OS4zNiA0Ni41NDQgODguOTAzLjMyNiAzLjI2NS41MTUgNi41Ny41MTUgOS45MjF6TTY3LjgyIDE1LjAxOGM0OS4xIDI0LjgxMSA4Mi43NjggNzUuNzExIDgyLjc2OCAxMzQuNDggMCA4My4xNjgtNjcuNDIgMTUwLjU4OC0xNTAuNTg4IDE1MC41ODh2LTQyLjM1M2M1OS43NzggMCAxMDguMjM1LTQ4LjQ1OSAxMDguMjM1LTEwOC4yMzUgMC0zNi44NS0xOC40My02OS4zOC00Ni41NjItODguOTI3YTk5Ljk0OSA5OS45NDkgMCAwIDEtLjQ5Ny05Ljg5NyA5OC41MTIgOTguNTEyIDAgMCAxIDYuNjQ0LTM1LjY1NnptMTU1LjI5MiAxODIuNzE4YzE3LjczNyAzNS41NTggNTQuNDUgNTkuOTk3IDk2Ljg4OCA1OS45OTd2NDIuMzUzYy02MS45NTUgMC0xMTUuMTYyLTM3LjQyLTEzOC4yOC05MC44ODZhMTU4LjgxMSAxNTguODExIDAgMCAwIDQxLjM5Mi0xMS40NjR6bS0xMC4yNi02My41ODlhOTguMjMyIDk4LjIzMiAwIDAgMS00My40MjggMTQuODg5QzE2OS42NTQgNzIuMjI0IDIyNy4zOSA4Ljk1IDMwMS44NDUuMDAzYzQuNzAxIDEzLjE1MiA3LjU5MyAyNy4xNiA4LjQ1IDQxLjcxNC01MC4xMzMgNC40Ni05MC40MzMgNDMuMDgtOTcuNDQzIDkyLjQzem01NC4yNzgtNjguMTA1YzEyLjc5NC04LjEyNyAyNy41NjctMTMuNDA3IDQzLjQ1Mi0xNC45MTEtLjI0NyA4Mi45NTctNjcuNTY3IDE1MC4xMzItMTUwLjU4MiAxNTAuMTMyLTIuODQ2IDAtNS42NzMtLjA4OC04LjQ4LS4yNDNhMTU5LjM3OCAxNTkuMzc4IDAgMCAwIDguMTk4LTQyLjExOGMuMDk0IDAgLjE4Ny4wMDguMjgyLjAwOCA1NC41NTcgMCA5OS42NjUtNDAuMzczIDEwNy4xMy05Mi44Njh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+)](https://moduscreate.com)

Autocomplete 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.

- [Getting Started](#getting-started)
- [How it Works](#how-it-works)
- [Modus Create](#modus-create)
- [Licensing](#licensing)

# Getting Started

For 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
First move to the server folder and run this command

```bash
npm install
```

After all dependencies are install let's run our server

```bash
npm start
```

Then let's move to the front end and install dependencies, first open a new terminal and run

```bash
cd modus-autocomplete/ModusAutocomplete
```

Install dependencies:

```bash
npm install or yarn install
```

Once the dependencies are install, let's start our app, make sure the server is running also

```bash
yarn run ios
```

[This is how should look] (https://www.screencast.com/t/hx1yLWIAlPc)

# How it works

The 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.

# Modus Create

[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.

Modus Create

This project is part of [Modus Labs](https://labs.moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=Autocomplete).

Modus Labs

# Licensing

This project is [MIT licensed](./LICENSE).