mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 01:12:56 +03:00
learn: update react native tutorial with videos (#2390)
This commit is contained in:
Rishichandra Wawhal
Shahidh K Muhammed
parent
08df38aa8c
commit
b52ed4ccf0
@ -11,7 +11,7 @@ const handleError = async (error, navigate) => {
|
||||
errObj.networkError.result.errors[0].code === 'invalid-jwt'
|
||||
) {
|
||||
console.log(errObj).networkError.result;
|
||||
await AsyncStorage.removeItem('@todo-graphql:auth0');
|
||||
await AsyncStorage.removeItem('@todo-graphql:session');
|
||||
navigate('Loading');
|
||||
}
|
||||
console.log(errObj);
|
||||
|
||||
@ -11,7 +11,7 @@ const handleError = async (error, navigate) => {
|
||||
errObj.networkError.result.errors[0].code === 'invalid-jwt'
|
||||
) {
|
||||
console.log(errObj).networkError.result;
|
||||
await AsyncStorage.removeItem('@todo-graphql:auth0');
|
||||
await AsyncStorage.removeItem('@todo-graphql:session');
|
||||
navigate('Loading');
|
||||
}
|
||||
console.log(errObj);
|
||||
|
||||
@ -4,8 +4,11 @@ metaTitle: "Apollo Client GraphQL Setup | GraphQL React Native Apollo Tutorial"
|
||||
metaDescription: "You will learn how to configure Apollo Client in React Native by installing dependencies like react-apollo, apollo-client, apollo-link-http, apollo-cache-inmemory"
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../src/YoutubeEmbed.js";
|
||||
import GithubLink from "../src/GithubLink.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/XSR6jH5doXk" />
|
||||
|
||||
Apollo gives a neat abstraction layer and an interface to your GraphQL server. You don't need to worry about constructing your queries with request body, headers and options, that you might have done with `axios` or `fetch` say. You can directly write queries and mutations in GraphQL and they will automatically be sent to your server via your apollo client instance.
|
||||
|
||||
### React Native Apollo Installation
|
||||
@ -81,7 +84,7 @@ export default class App extends React.Component {
|
||||
|
||||
+ async componentDidMount() {
|
||||
+ // fetch session
|
||||
+ const session = await AsyncStorage.getItem('@todo-graphql:auth0');
|
||||
+ const session = await AsyncStorage.getItem('@todo-graphql:session');
|
||||
+ const sessionObj = JSON.parse(session);
|
||||
+ const { token, id } = sessionObj;
|
||||
+ // make apollo client with this session token
|
||||
|
||||
@ -4,6 +4,10 @@ metaTitle: "GraphQL Queries to fetch data | GraphQL React Native Apollo Tutorial
|
||||
metaDescription: "Try out GraphQL Query using GraphiQL. A GraphQL query example with parameters, arguments and variables to fetch data dynamically"
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/xyI6w3vL_vw"/>
|
||||
|
||||
<a name="graphiql"></a>
|
||||
## Try out GraphQL queries
|
||||
For this tutorial we've set up a GraphQL API for you. The most common
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "Try out GraphQL Mutation using GraphiQL. A GraphQL mutation ex
|
||||
|
||||
import {Link} from 'gatsby';
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/qGq1aVveKDc"/>
|
||||
|
||||
These are the concepts you should know before you attack mutations (haha):
|
||||
- <Link to="/intro-to-graphql/2-fetching-data-queries#graphiql">Using GraphiQL</Link>
|
||||
- <Link to="/intro-to-graphql/2-fetching-data-queries#graphql-query-variables">Using query variables</Link>
|
||||
|
||||
@ -4,6 +4,11 @@ metaTitle: "GraphQL Subscriptions for realtime data | GraphQL React Native Apoll
|
||||
metaDescription: "Try out GraphQL Subscription using GraphiQL. A GraphQL subscriptions example to fetch live data pushed over websockets "
|
||||
---
|
||||
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/n5zG7WdAYYI"/>
|
||||
|
||||
The GraphQL specification allows for something called subscriptions that are like GraphQL queries
|
||||
but instead of returning data in one read, you get data pushed from the server.
|
||||
|
||||
|
||||
@ -11,12 +11,12 @@ Firstly, we need to modify our first `FETCH_TODOS` query such that it fetches on
|
||||
<GithubLink link="https://github.com/hasura/graphql-engine/blob/master/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/screens/components/Todo/Todos.js" text="Todos.js" />
|
||||
|
||||
```graphql
|
||||
query ($is_public: Boolean) {
|
||||
query ($isPublic: Boolean) {
|
||||
todos (
|
||||
order_by: {
|
||||
created_at: desc
|
||||
},
|
||||
where: { is_public: { _eq: $is_public} },
|
||||
where: { is_public: { _eq: $isPublic} },
|
||||
+ limit: 10
|
||||
) {
|
||||
id
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "You will learn the GraphQL query to be made to load older todo
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/ajMuxGqX-Dg" />
|
||||
|
||||
In the last section, we modified the query that fetches all the todos to fetch only 10 todos on first load. We also wrote another query that fetches older todos. Now let us implement a button that loads older todos on press. Go to `src/screens/components/Todo/LoadOlder.js`, import `gql` from `graphql-tag` and define the query that we wrote in the last section:
|
||||
|
||||
<GithubLink link="https://github.com/hasura/graphql-engine/blob/master/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/screens/components/Todo/LoadOlder.js" text="LoadOlder.js"/>
|
||||
|
||||
@ -4,6 +4,11 @@ metaTitle: "Mutation to create todos | GraphQL React Native Apollo Tutorial"
|
||||
metaDescription: "GraphQL Mutation to create new personal todos. Try the mutation in GraphiQL, passing the Authorization token to get authenticated results."
|
||||
---
|
||||
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/wjOBsczz_fU" />
|
||||
|
||||
In this part of the tutorial, you will learn how to create new todos by using GraphQL Mutations.
|
||||
|
||||
Let's define a graphql query to do a mutation into todos.
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "We will use the Apollo Client Mutation component from react-ap
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/dCm4hIhQB7w" />
|
||||
|
||||
Firstly, let us define the mutation that we looked at in the previous section. Import `gql` from `graphql-tag` and define the following mutation in `src/screens/components/Todo/Textbox.js`.
|
||||
|
||||
<GithubLink link="https://github.com/hasura/graphql-engine/blob/master/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/screens/components/Todo/Textbox.js" text="Textbox.js"/>
|
||||
|
||||
@ -4,6 +4,10 @@ metaTitle: "Query to fetch todo | GraphQL React Native Apollo Tutorial"
|
||||
metaDescription: "GraphQL Query to fetch personal todos. Try the query in GraphiQL, passing the Authorization token to get authenticated results"
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/6rP-LTvzRdo" />
|
||||
|
||||
The first graphql query you will write will be to fetch personal todos. You will need to load the todo data from the database which belongs to the logged in user. Let's define a graphql query to fetch the required data.
|
||||
|
||||
```graphql
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "We will use the Apollo Client Query component from react-apoll
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/qWcIXZ15FFw" />
|
||||
|
||||
In this section, we will implement GraphQL Queries and integrate with the react native UI.
|
||||
With Apollo Client, you can send queries in 2 different ways.
|
||||
|
||||
|
||||
@ -6,11 +6,14 @@ metaDescription: "We will handle the GraphQL loading and error states in React N
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/RoZRYf-7mUY" />
|
||||
|
||||
As we saw in the previous step, Apollo injected props into the component’s render prop function. Among them `loading` and `error` are common ones that you will need to handle in your app.
|
||||
|
||||
Now let's go back to the `<Query>` component that you wrote in the previous step.
|
||||
|
||||
|
||||
<GithubLink link="https://github.com/hasura/graphql-engine/blob/master/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/screens/components/Todo/Todos.js" text="Todos.js"/>
|
||||
|
||||
```javascript
|
||||
|
||||
@ -4,6 +4,10 @@ metaTitle: "Subscribe to new todos | GraphQL React Native Apollo Tutorial"
|
||||
metaDescription: "You will learn how to make use of GraphQL Subscriptions to get notified whenever a new todo comes in React Native app"
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/HKJdi8urqY4" />
|
||||
|
||||
In this section we will capture newly added public todos in the database. This can be done by subscribing to the last todo added in the database. The subscription query looks like:
|
||||
|
||||
```graphql
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "You will learn how to make use of GraphQL Subscriptions to get
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/NPF19xKjfqI" />
|
||||
|
||||
Go to `src/screens/components/Todos`.
|
||||
|
||||
For running a custom subscription, we need access to our `ApolloClient` instance. To do that, we convert our `Todos` component into an Apollo HOC by wrapping it in `withApollo`.
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "You will learn how to sync new todos added by other people in
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/mQaYuHjUyIg" />
|
||||
|
||||
In the previous section we made a button that shows up only when there are new public todos in the database. Now lets make this button functional i.e. on pressing this button, newer todos should be fetched from the backend, synced with the local todos and the button must be dismissed.
|
||||
|
||||
Go to `src/screens/components/Todo/LoadNewer.js`, import `gql` and define the query to fetch newer todos.
|
||||
|
||||
@ -4,6 +4,10 @@ metaTitle: "Todo app react native boilerplate setup | GraphQL React Native Apoll
|
||||
metaDescription: "The GraphQL backend is already ready. The task is to convert the static UI into a working realtime app in React Native"
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/gn3Qrsi2HFs" />
|
||||
|
||||
For this tutorial, the GraphQL backend and the basic app UI is already ready.
|
||||
Our task will be convert the "static" UI into a working realtime app.
|
||||
|
||||
|
||||
@ -4,6 +4,10 @@ metaTitle: "Update last seen of user with Mutation | GraphQL React Native Apollo
|
||||
metaDescription: "GraphQL Mutation to update last seen of user to make them available online. Use setInterval to trigger mutation every few seconds "
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/jwHQSh0BUkk" />
|
||||
|
||||
import GithubLink from "../src/GithubLink.js";
|
||||
|
||||
We cruised through our GraphQL queries and mutations. We queried for todos, added a new todo, updated an existing todo, removed an existing todo.
|
||||
@ -55,7 +59,7 @@ In `componentDidMount`, we will create a `setInterval` to update the last_seen o
|
||||
// bootstrap session in componentDidMount
|
||||
async componentDidMount() {
|
||||
// fetch session
|
||||
const session = await AsyncStorage.getItem('@todo-graphql:auth0');
|
||||
const session = await AsyncStorage.getItem('@todo-graphql:session');
|
||||
const sessionObj = JSON.parse(session);
|
||||
const { token, id } = sessionObj;
|
||||
// make apollo client with this session token
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "You will learn how to configure GraphQL Subscriptions using Re
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/O7Wv2RCQvcc" />
|
||||
|
||||
When we had initially set up Apollo, we used Apollo Boost to install the required dependencies. But subscriptions is an advanced use case which Apollo Boost does not support. So we have to install more dependencies to set up subscriptions.
|
||||
|
||||
### React Native Apollo Subscriptions Setup
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "Integrate React Apollo Subscription Component to watch for cha
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/vg6BLT11RAs" />
|
||||
|
||||
So let's define the graphql subscription to be used.
|
||||
|
||||
Open `src/screens/UsersScreen.js` and add the following code, below the other imports
|
||||
|
||||
@ -4,6 +4,10 @@ metaTitle: "Mutation to update todos | GraphQL React Native Apollo Tutorial"
|
||||
metaDescription: "GraphQL Mutation to update existing personal todos. Try the mutation in GraphiQL, passing the Authorization token to mark a todo as completed"
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/HBSJZ3OkrgU" />
|
||||
|
||||
In this part of the tutorial, you will learn how to mark an existing todo as completed by using GraphQL Mutations.
|
||||
|
||||
Let's define a graphql query to do a mutation into todos.
|
||||
@ -13,7 +17,6 @@ Let's define a graphql query to do a mutation into todos.
|
||||
update_todos (
|
||||
_set: {
|
||||
is_completed: $isCompleted,
|
||||
updated_at: "now()"
|
||||
},
|
||||
where: {
|
||||
id: {
|
||||
|
||||
@ -6,8 +6,11 @@ metaDescription: "We will use the Apollo Mutation component from react-apollo as
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
Now let's do the integration part. Open `src/screens/components/Todo/TodoItem.js` and add the following code below the other imports:
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/KlenUF0jBg4" />
|
||||
|
||||
Now let's do the integration part. Open `src/screens/components/Todo/TodoItem.js` and add the following code below the other imports:
|
||||
|
||||
<GithubLink link="https://github.com/hasura/graphql-engine/blob/master/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/screens/components/Todo/TodoItem.js" text="TodoItem.js"/>
|
||||
|
||||
@ -21,8 +24,7 @@ Let's define the graphql mutation to update the completed status of the todo
|
||||
+ mutation ($id: Int, $isCompleted: Boolean) {
|
||||
+ update_todos (
|
||||
+ _set: {
|
||||
+ is_completed: $isCompleted,
|
||||
+ updated_at: "now()"
|
||||
+ is_completed: $isCompleted
|
||||
+ },
|
||||
+ where: {
|
||||
+ id: {
|
||||
|
||||
@ -4,6 +4,10 @@ metaTitle: "Mutation to delete todos | GraphQL React Native Apollo Tutorial"
|
||||
metaDescription: "GraphQL Mutation to delete existing personal todos. Try the mutation in GraphiQL, passing the Authorization token to delete a todo"
|
||||
---
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/B8gdqKbihQI" />
|
||||
|
||||
In this part of the tutorial, you will learn how to remove existing todos by using GraphQL Mutations.
|
||||
|
||||
Let's define a graphql query to do a mutation into todos.
|
||||
|
||||
@ -6,6 +6,10 @@ metaDescription: "We will use the Apollo Mutation component from react-apollo wi
|
||||
|
||||
import GithubLink from "../../src/GithubLink.js";
|
||||
|
||||
import YoutubeEmbed from "../../src/YoutubeEmbed.js";
|
||||
|
||||
<YoutubeEmbed link="https://www.youtube.com/embed/nz26rPS6dLk" />
|
||||
|
||||
Let us integrate the remove todos feature in our React Native app. Firstly import `gql` and define the mutation in `src/screens/components/Todo/TodoItem/js`.
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user