diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-boilerplate/src/utils.js b/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-boilerplate/src/utils.js index b772a84c349e2..233011069811f 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-boilerplate/src/utils.js +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-boilerplate/src/utils.js @@ -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); diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/utils.js b/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/utils.js index b772a84c349e2..233011069811f 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/utils.js +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/app-final/src/utils.js @@ -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); diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/apollo-client.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/apollo-client.md index c3636cf3a810f..b0721b114b2ca 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/apollo-client.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/apollo-client.md @@ -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"; + + 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 diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md index 46a76e6610e19..8d3f8954f0d91 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md @@ -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"; + + + ## Try out GraphQL queries For this tutorial we've set up a GraphQL API for you. The most common diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/3-writing-data-mutations.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/3-writing-data-mutations.md index b165ce58ce16c..07f27b1676168 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/3-writing-data-mutations.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/3-writing-data-mutations.md @@ -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"; + + + These are the concepts you should know before you attack mutations (haha): - Using GraphiQL - Using query variables diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/4-watching-data-subscriptions.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/4-watching-data-subscriptions.md index 83da32bf4e6c7..1796e226938c1 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/4-watching-data-subscriptions.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/intro-to-graphql/4-watching-data-subscriptions.md @@ -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"; + + + 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. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/1-load-more-query.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/1-load-more-query.md index 75a63953df885..5ac6e6749de39 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/1-load-more-query.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/1-load-more-query.md @@ -11,12 +11,12 @@ Firstly, we need to modify our first `FETCH_TODOS` query such that it fetches on ```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 diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/2-load-more-todos-integration.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/2-load-more-todos-integration.md index be3a110c67e0d..17fcb720beac2 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/2-load-more-todos-integration.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/load-older/2-load-more-todos-integration.md @@ -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"; + + + 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: diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/1-create-todo.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/1-create-todo.md index 856d7d477fe03..294c7604d28fc 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/1-create-todo.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/1-create-todo.md @@ -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"; + + + 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. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/2-create-mutation.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/2-create-mutation.md index aedcc6861ee09..0c43ab7f23758 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/2-create-mutation.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/mutations/2-create-mutation.md @@ -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"; + + + 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`. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/1-fetch-todos-query.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/1-fetch-todos-query.md index 1d7c403a2bd1f..8ada8708f410b 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/1-fetch-todos-query.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/1-fetch-todos-query.md @@ -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"; + + + 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 diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/2-create-query.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/2-create-query.md index 8fe8ca0710c4f..cf35017b9c899 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/2-create-query.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/2-create-query.md @@ -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"; + + + 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. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/3-handle-errors.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/3-handle-errors.md index b67adbcb006ab..c9d28c2c2497a 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/3-handle-errors.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/queries/3-handle-errors.md @@ -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"; + + + 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 `` component that you wrote in the previous step. - ```javascript diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/1-subscribe-to-new-todos.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/1-subscribe-to-new-todos.md index 194c55cb48c9b..4acd119c2bc2f 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/1-subscribe-to-new-todos.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/1-subscribe-to-new-todos.md @@ -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"; + + + 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 diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/2-run-subscription.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/2-run-subscription.md index a6e131c6601b6..0b187e40f471c 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/2-run-subscription.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/2-run-subscription.md @@ -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"; + + + 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`. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/3-sync-todos.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/3-sync-todos.md index 52641a492bb22..c134ba6ead34e 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/3-sync-todos.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/realtime-feed/3-sync-todos.md @@ -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"; + + + 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. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/setup.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/setup.md index 58b1aec0103e4..89d0dfed35cd8 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/setup.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/setup.md @@ -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"; + + + 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. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions.md index e06c3cf134ce3..9312bea951e26 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions.md @@ -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"; + + + 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 diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/1-subscription.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/1-subscription.md index 83cd79a14ba52..e58649276b8f0 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/1-subscription.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/1-subscription.md @@ -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"; + + + 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 diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/3-create-subscription.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/3-create-subscription.md index dedd505952e62..02e744b0acf55 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/3-create-subscription.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/subscriptions/3-create-subscription.md @@ -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"; + + + So let's define the graphql subscription to be used. Open `src/screens/UsersScreen.js` and add the following code, below the other imports diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/1-update-todos.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/1-update-todos.md index 5b9c64d98a7a5..dcb0b507a2019 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/1-update-todos.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/1-update-todos.md @@ -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"; + + + 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: { diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/2-mutation-cache.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/2-mutation-cache.md index b30ebf6463f2c..c005607fd7dae 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/2-mutation-cache.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/2-mutation-cache.md @@ -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"; + + +Now let's do the integration part. Open `src/screens/components/Todo/TodoItem.js` and add the following code below the other imports: @@ -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: { diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/3-remove-todos.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/3-remove-todos.md index 424853834b575..7f01bc1c8ec45 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/3-remove-todos.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/3-remove-todos.md @@ -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"; + + + 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. diff --git a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/4-remove-todos-integration.md b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/4-remove-todos-integration.md index db8eac65ee97a..75ec1e5e8bf52 100644 --- a/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/4-remove-todos-integration.md +++ b/community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations/4-remove-todos-integration.md @@ -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"; + + + 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`.