Code App dengan GraphQL, React Native dan AWS AppSync: App

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product image — What You'll Be Creating

Dalam tutorial ini, saya akan menunjukkan cara membuat dan berinteraksi dengan database GraphQL menggunakan AWS AppSync dan React Native. Aplikasi ini akan memiliki fungsionalitas offline real-time *, sesuatu yang kita dapatkan dari kotak dengan AppSync.

Di posting sebelumnya kami menyiapkan back-end GraphQL kami dengan layanan Amazon AppSync. Coba lihat jika Kamu belum melakukannya. Atau, jika Kamu ingin di perkenalan dengan GraphQL, lihat beberapa tulisan kami yang lain.

Dalam tulisan ini, kita akan membungkus semuanya dengan berjalan melalui membangun klien React Native. Proyek ini agak terlalu rumit untuk ditunjukkan padamu melalui langkah demi langkah, tapi saya akan menjelaskan arsitektur proyek dan menunjukkan bagian penting dari source code.

Ikhtisar Arsitektur App dan Struktur Folder

Aplikasi kami akan memiliki entry point utama yang terdiri dari dua tampilan tab. Satu tab akan mencantumkan kota-kota dari database GraphQL kami, yang lainnya akan menjadi bentuk masukan untuk menambahkan kota baru. Tab Cities akan menjadi navigator yang memungkinkan pengguna menavigasi ke masing-masing kota.

Kami akan menyimpan komponen utama di source folder, dan akan memiliki folder lain di direktori src untuk menahan mutations, queries, dan subscriptions GraphQL kami.

Kami juga akan memiliki folder aset untuk menampung gambar kami.

Membuat dan Mengkonfigurasi Klien React Native

Sebagai referensi, lihat kode akhir untuk aplikasi ini di tutorial GitHub repo, tapi saya akan menjelaskan beberapa langkah yang saya ambil untuk membuat aplikasi dari awal.

Pertama, kami membuat aplikasi React Native baru menggunakan Expo.

Begitupun dalam proyek yang baru dibuat, kami memasang dependensi kami. Untuk fungsionalitas GraphQL dan AppSync, kami menggunakan dependensi berikut ini:

aws-appsync
aws-appsync-react
graphql-tag
react-apollo
uuid

Kami juga menggunakan dependensi berikut untuk desain UI:

1	react-navigation
2	react-native-elements
3	react-native-vector-icons

Juga, satu perpustakaan Vector Icons telah terpasang, kami menghubungkannya:

1	react-native link react-native vector-icons

Setelah menginstal dependensi kami, kami mendownload file AppSync.js dari konsol AppSync kami. Di konsol proyek AppSync kami, kita pilih React Native di bagian bawah, dan mengeklik tombol Download oranye untuk mendownload file konfigurasi ini.

File konfigurasi ini menyimpan informasi klien AppSync yang kami butuhkan untuk membuat klien baru.

Mengkonfigurasi Provider dan Store

Tingkat atas aplikasi adalah tempat kami akan melakukan konfigurasi untuk memasang API AppSync dengan klien React Native. Jika Anda telah menggunakan Redux atau React Apollo sebelumnya, semua ini akan menjadi tidak asing lagi. Jika belum, ingatlah bahwa setiap anak Provider, dalam kasus kami ApolloProvider, akan memiliki akses ke fungsi yang diberikannya.

Kode berikut adalah file App.js baru kami, yang merupakan komponen utama yang diimpor dari titik masuk index.js kami.

import React from 'react'
import Tabs from './src/Tabs'

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { ApolloProvider } from 'react-apollo';

import appSyncConfig from './aws-exports';

const client = new AWSAppSyncClient({
  url: appSyncConfig.graphqlEndpoint,
  region: appSyncConfig.region,
  auth: {
    type: appSyncConfig.authType,
    apiKey: appSyncConfig.apiKey,
  }
});

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
      <Tabs />
    </Rehydrated>
  </ApolloProvider>
);

export default WithProvider

Dalam file ini, kami menyiapkan klien AppSync baru menggunakan kombinasi konstruktor AWSAppSyncClient dari aws-appsync dan juga konfigurasi di file aws-exports.js kami, yang menyediakan URL API GraphQL, wilayah, jenis otentikasi, dan otentikasi API key.

Kami kemudian membungkus entrypoint utama kami, file Tabs.js yang akan menahan tab navigasi kami, di ApolloProvider dan masuk ke klien AppSync sebagai prop klien. Kami juga membungkus komponen Tabs dalam komponen Rehydrated yang kami impor dari aws-appsync-react. Ini akan memastikan bahwa kita telah membaca dari penyimpanan async dan telah mengosongkan cache kita sebelum merender UI.

Sekarang aplikasi kami akan dapat melakukan kueri data dari titik akhir AppSync kami, dan juga untuk melakukan mutations dan subscriptions!

Navigasi

Titik masuk utama aplikasi adalah tab navigasi, yang diterapkan pada file Tabs.js dengan React Navigation.

Apa yang telah kami lakukan di sini adalah membuat dan mengekspor TabNavigator dengan dua tab. Ini adalah:

Cities - Komponen ini mencantumkan kota kita, dan ini menjadi komponen navigator dalam dan dari dirinya sendiri. Komponen ini adalah navigator karena kita ingin bisa menavigasi ke masing-masing kota dan melihat lokasi di dalam kota.
AddCity - Komponen ini merupakan form bagi kita untuk bisa menambah kota baru.

Komponen Reusable

Aplikasi ini hanya memiliki satu komponen reusable, TextInput yang disesuaikan. Karena kita akan menduplikasi gaya dan fungsi ini berulang-ulang, kami memutuskan untuk menjadikannya komponennya sendiri. Komponen masukan diimplementasikan di Input.js.

Cities List dan City Navigation

Tampilan utama dari aplikasi ini adalah daftar kota yang akan kita ambil dari GraphQL. Kami ingin dapat menavigasi dari setiap kota yang terdaftar ke tampilan detail kota tempat kami dapat menambahkan lokasi.

Untuk melakukan ini, kami menjadikan Cities.js sebagai StackNavigator miliknya sendiri, dan City.js komponen yang kami navigasikan saat memilih kota. Saat mengklik sebuah kota di Cities, kami melewati namanya dan id sebagai alat peraga untuk City.

Cities.js

Dalam komponen ini, kami menarik menggunakan query listCities, dan kami juga berlangganan NewCitySubscription, sehingga ketika sebuah kota baru ditambahkan, bahkan dari klien lain, kami akan menangani langganan tersebut dan memperbarui jajaran kota kami. Query listCities membuat berbagai kota yang tersedia di komponen kami sebagai this.props.cities.

City.js

Dalam komponen ini, kita melewati sebuah kota sebagai props dari navigasi (tersedia sebagai props.navigation.state.params.city). Kami menggunakan nilai id kota untuk mengambil daftar lokasi untuk kota yang dipilih menggunakan query listLocations. Kami berlangganan lokasi baru dengan cara yang sama seperti kami berlangganan kota baru di Cities.js, menggunakan langganan NewLocationSubscription. Kami juga menyediakan fungsi update & optimisticResponse untuk saat sebuah kota baru ditambahkan. Respons yang optimis

Menambahkan Cities

Akhirnya, kita perlu menerapkan fungsi untuk menambahkan kota baru ke API GraphQL kami di file AddCity.js. Untuk melakukan ini, kita telah menghubungkan mutation dengan bentuk yang akan memanggil createCity, melewati nilai input form.

AddCity memiliki fungsi onAdd yang kami definisikan dalam komposisi GraphQL kami, yang tidak hanya menulis sebuah kota baru ke database GraphQL kami, namun juga mengimplementasikan UI yang optimis dengan menggunakan kombinasi optimisitcResponse dan update.

Mutations, Queries, dan Subscriptions

Mutations, queries, dan subscriptions adalah fungsi inti untuk mengintegrasikan API GraphQL kami. Di aplikasi kami, fungsi ini diterapkan di file Cities.js, City.js, dan AddCity.js menggunakan klien AppSync.

Mari kita lihat lebih dekat bagaimana mutation, query, dan subscriptions diterapkan dalam kode kita.

Queries

Pertama, mari kita lihat cara membuat dan mengekspor query GraphQL yang dapat berinteraksi dengan listCities query di Skema AppSync kami. Kode ini terdapat dalam file src/queries/LIstCities.js.

import gql from 'graphql-tag';

export default gql`
query listCities {
  listCities  {
    items {
      name
      country
      id
    }
  }
}`

Selanjutnya, kami mengimpor query ini di file Cities.js, bersama dengan beberapa penunjang dari react-apollo, dan memasang komponen yang ingin kami akses ke data ini menggunakan compose dan graphql dari react-apollo.

import { compose, graphql } from 'react-apollo'
import ListCities from './queries/ListCities'

class Cities extends React.Component {
  // class definition here
  // now have access to this.props.cities
}

export default compose(
  graphql(ListCities, {
      props: props => ({
        cities: props.data.listCities ? props.data.listCities.items : [],
      })
  })
)(CityList)

Sekarang kita memiliki akses ke deretan kota dari server GraphQL kita sebagai prop. Kita dapat menggunakan this.props.cities untuk memetakan deretan kota yang masuk dari GraphQL.

Mutations

Untuk membuat mutations, pertama kita perlu membuat mutasi GraphQL dasar dan mengekspornya. Kami melakukan ini di file src/mutations/CreateCity.js.

import gql from 'graphql-tag'

export default gql`
  mutation addCity($name: String!, $country: String!, $id: ID!) {
    createCity(input: {
      name: $name, country: $country, id: $id
    }) {
      name
      country
      id
    }
  }
`

Baru kita bisa mengimpor mutasi ini (bersama dengan pembantu Apollo) di file AddCity.js dan menggunakannya dalam sebuah komponen:

import { compose, graphql } from 'react-apollo'
import AddCityMutation from './mutations/AddCity'

class AddCity extends React.Component {
  // class definition here
  // now have access to this.props.onAdd()
}

export default compose(
  graphql(AddCityMutation, {
    props: props => ({
      onAdd: city => props.mutate({
        variables: city
      })
    })
  })
)(AddCity)

Sekarang, kita memiliki akses ke sebuah prop yang disebut onAdd, yang kita lewati sebuah objek yang ingin kita kirim ke mutasi!

Subscriptions

Subscriptions memungkinkan kami untuk berlangganan perubahan data dan memperbaruinya di aplikasi kami secara real time. Jika kami mengubah database kami dengan menambahkan atau menghapus kota, kami ingin agar aplikasi kami diperbarui secara real time.

Pertama kita perlu menciptakan mutasi dan mengekspornya sehingga kita bisa memiliki akses ke dalamnya di dalam klien. Kami simpan ini di file src/subscriptionsNewCitySubscriptions.js.

import gql from 'graphql-tag'

export default gql`
subscription NewCitySub {
  onCreateCity {
    name
    country
    id
  }
}`;

Sekarang kita bisa mengimpor dan melampirkan subscription di Cities.js. Kami sudah melihat bagaimana cara mendapatkan kota dari API kami. Mari sekarang perbarui fungsi ini untuk langganan perubahan baru dan memperbarui deretan kota saat kota baru ditambahkan.

import AllCity from './queries/AllCity'
import NewCitiesSubscription from './subscriptions/NewCitySubscription';
import { compose, graphql } from 'react-apollo'


class Cities extends React.Component {
  componentWillMount(){
    this.props.subscribeToNewCities();
  }
  render() {
    // rest of component here
  }
}

export default compose(
  graphql(ListCities, {
    options: {
      fetchPolicy: 'cache-and-network'
    },
    props: (props) => {
      return {
        cities: props.data.listCities ? props.data.listCities.items : [],
        subscribeToNewCities: params => {
          props.data.subscribeToMore({
            document: NewCitiesSubscription,
            updateQuery: (prev, { subscriptionData: { data : { onCreateCity } } }) => {
              return {
                ...prev,
                listCities: {
                  __typename: 'CityConnection',
                  items: [onCreateCity, ...prev.listCities.items.filter(city => city.id !== onCreateCity.id)]
                }
              }
            }
          })
        }
      }
    }
  })
)(Cities)

Kami menambahkan sebuah prop baru yang disebut subscribeToNewCities, yang kami sebut di componentDidMount. Dalam subscription, kami menyampaikan sebuah dokumen (definisi subscription) dan updateQuery untuk menjelaskan apa yang ingin kita lakukan saat update ini.

Kami mendekonstruksi createCity (berisi mutation) dari props yang masuk ke fungsi updateQuery, dan mengembalikan semua nilai yang ada beserta daftar listCities yang diperbarui yang berisi array cities sebelumnya beserta data kota baru yang kami dapatkan dari createCity.

Optimistic UI

Bagaimana jika kami tidak ingin menunggu subscription mengembalikan data terbaru dari API kami untuk memperbarui UI kami?

Jika pengguna membuat kota baru, kami ingin menambahkannya secara otomatis ke dalam array cities dan memilikinya di aplikasi kami sebelum menerima konfirmasi dari back-end service.

Kita bisa melakukannya dengan mudah menggunakan beberapa teknik dan fungsi.

Mari memperbarui AddCityMutation kami ke yang berikut ini (Anda dapat melihat kode ini di file sumber AddCity.js):

import { compose, graphql } from 'react-apollo'
import AddCityMutation from './mutations/AddCity'

class AddCity extends React.Component {
  // class definition here
  // now have access to this.props.onAdd()
}

export default compose(
  graphql(AddCityMutation, {
    props: props => ({
      onAdd: city => props.mutate({
        variables: city,
        optimisticResponse: {
          __typename: 'Mutation',
          createCity: { ...city,  __typename: 'City' }
        },
        update: (proxy, { data: { createCity } }) => {
          const data = proxy.readQuery({ query: ListCities });
          data.listCities.items.unshift(createCity);
          proxy.writeQuery({ query: ListCities, data });
        }
      })
    })
  })
)(AddCity)

Begini, kami telah menambahkan dua properti baru ke fungsi mutate objek argumen:

optimisticResponse mendefinisikan respons baru yang ingin Anda miliki dalam fungsi update
update membutuhkan dua argumen, proxy (yang memungkinkan Anda membaca dari cache) dan data yang ingin Anda gunakan untuk melakukan pembaruan. Kami membaca cache saat ini (proxy.readQuery), menambahkan item baru kami ke dalam array items, lalu menulis kembali ke cache, yang memperbarui UI kami.

Kesimpulan

GraphQL menjadi semakin utama. Sebagian besar kompleksitas seputar GraphQL berkaitan dengan pengelolaan backend dan API layer. Namun, alat seperti AppSync menghapuskan kompleksitas ini, membebaskan pengembang dari menghabiskan sebagian besar waktu mereka untuk mengkonfigurasi dan bekerja di server.

Saya berharap bisa lebih banyak inovasi di ruang ini, dan tidak sabar untuk melihat apa lagi yang akan kita lihat di tahun 2018!

Jika Anda tertarik untuk menggunakan AppSync bersamaan dengan Serverless, periksalah pengantar ini untuk menggunakan mereka berdua bersama-sama.

Jika Anda ingin mempelajari lebih lanjut tentang AWS AppSync, saya akan menyarankan untuk melihat homepage AppSync, dan dokumentasi untuk membangun klien GraphQL.

Jika Anda ingin berkontribusi pada proyek ini, Anda dapat terhubung ke repo GitHub kami. Jika Anda memiliki ide, silakan mengirimkan PR kepada kami, atau gunakan aplikasi ini sebagai starter untuk proyek React Native GraphQL Kamu berikutnya!

Dan sementara itu, lihat beberapa tutorial React Native kami yang lain di sini di Envato Tuts+!