withered-flowers / education-react-native-authentication-flow

Education React Native Authentication Flow & Apollo Client GraphQL

Table of Content

Scope Pembelajaran

• React Navigation

  • Authentication Flow

• Apollo Client GraphQL

  • Apollo Link
  • gql
  • useQuery
  • useLazyQuery
  • useMutation

• SecureStore

  • setItemAsync
  • getItemAsync
  • deleteItemAsync

Demo

Step-by-Step

1. Buat LoginContext (contexts/LoginContext.jsx)
2. Buat StackHolder.js (stacks/StackHolder.jsx)
3. Modif App.js untuk menggunakan LoginProvider
4. Install @apollo/client graphql
5. Buat apollo.js (configs/apollo.js)
6. Buat index.js (queries/index.js)
7. Modif App.js untuk menggunakan ApolloProvider
8. Modif LoginPage.jsx untuk melakukan login via GraphQL (sampai muncul di halaman dulu)
9. Install expo-secure-store (npx expo install expo-secure-store)
10. Lanjut modif LoginPage.jsx untuk menyimpan token ke SecureStore dan "pindah halaman" ke HomePage.jsx
11. Modif configs/apollo.js untuk menggunakan Apollo Link
12. Modif queries/index.js untuk meng-query data colors
13. Modif screens/HomePage.jsx untuk menampilkan data colors
14. Modif queries/index.js untuk me-mutation data color (colorAdd)
15. Modif screens/ColorAddPage.jsx untuk menambahkan data color dan me-refresh data colors pada HomePage.jsx secara otomatis
16. Modif screens/HomePage.jsx untuk menggunakan logout

References