https://github.com/nhost/nhost-react-native-example-app
A Nhost Starter Project Using React Native
https://github.com/nhost/nhost-react-native-example-app
graphql hasura nhost react-native storage
Last synced: about 1 month ago
JSON representation
A Nhost Starter Project Using React Native
- Host: GitHub
- URL: https://github.com/nhost/nhost-react-native-example-app
- Owner: nhost
- Created: 2020-05-19T06:53:40.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T21:49:50.000Z (over 2 years ago)
- Last Synced: 2023-03-05T19:52:48.040Z (about 2 years ago)
- Topics: graphql, hasura, nhost, react-native, storage
- Language: JavaScript
- Homepage:
- Size: 2.78 MB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Nhost React Native Example App
[Nhost](https://nhost.io) example app in React Native using [Hasura](https://hasura.io).
## Get started
1. Create a project on [Nhost](https://nhost.io/register).
2. Clone this repo.
3. Copy `config-example.yaml` to `config.yaml` in `hasura/`.
4. Update `config.yaml` with `endpoint` and `admin_secret` in `hasura/`.
5. Apply migrations and metadata: `cd hasura; hasura migrate apply; hasura metadata apply;`.
6. Copy `config-example.ts` to `config.ts` in `src/`.
7. Update `config.ts` with the details from you project at Nhost.
8. `yarn install`.
9. `yarn start`.
## Creating React Native Project
```javascript
npx react-native init
```
---------------------------------------------------------------------------------------------------------------------------
## Adding the apis
Creating a file `src/helpers/api.js`
```
export const GRAPHQL_ENDPOINT = 'https://hasura-[id].nhost.app/v1/graphql';
export const BACKEND_ENDPOINT = 'https://backend-[id].nhost.app';
export const X_HASURA_ADMIN_SECRET = '';
```
---------------------------------------------------------------------------------------------------------------------------
## Adding nhost-js-sdk
##### Installation
`npm install --save nhost-js-sdk`
##### Initialising Nhost Auth & Storage
Creating a file `src/helpers/nhostSdk/index.js`
```
import nhost from 'nhost-js-sdk';
import { BACKEND_ENDPOINT } from '../api';
const config = {
endpoint: BACKEND_ENDPOINT,
};
nhost.initializeApp(config);
const auth = nhost.auth();
const storage = nhost.storage();
export { auth, storage };
```
##### Checkout the full usage of Auth and Storage [here](https://github.com/nhost/nhost-js-sdk).
## A Simple Working Auth can be found in this repo.
##### Working GIF
| iOS | Android |
|----------------------------------------------|----------------------------------------------|
|  | |
---------------------------------------------------------------------------------------------------------------------------
## Working with GraphQL
Look at the file in `src/helepers/getRequestObject.js`
```
import { GRAPHQL_ENDPOINT, X_HASURA_ADMIN_SECRET } from "./api";
export const getRequestObject = ({ data, token }) => ({
method: 'POST',
url: GRAPHQL_ENDPOINT,
data,
headers: {
Authorization: `Bearer="${token}"`,
'x-hasura-admin-secret': X_HASURA_ADMIN_SECRET
},
})
// A Sample GraphQL Query
export const getSkills = () => {
return {
query: `query getSkills {
tags {
tag
}
}`
}
}
// A function which returns a response to the axios request, wrapping the graphQL Function
const fetchSkills = async (_, token) => {
const response = await axios(
getRequestObject({
data: getSkills(),
token
})
);
return response;
}
```
Every `query` or `mutation` can be composed as shown above to work with Hasura GraphQL.