Persediaan Pelanggan Apollo untuk permintaan graphQL dalam React

pengenalan

Artikel ini akan menunjukkan cara mengkonfigurasi apl React untuk permintaan graphQL, untuk ini lib APollClient akan digunakan. Ideanya ialah untuk membentangkan cara mengkonfigurasi apl dan contoh cara membuat permintaan.

libs

• @apollo/client: lib yang membolehkan anda mengurus keadaan dan membuat permintaan dengan GraphQL
• graphql: lib yang membenarkan penghuraian pertanyaan GraphQL

Untuk menambah lib pada projek:

benang tambah @apollo/client graphql --dev

tetapan

Seterusnya saya akan menunjukkan cara mengkonfigurasi ApolloClient untuk mendayakan permintaan graphQL.
Pertama, konteks ApolloClient akan dibuat, supaya semua yang terkandung sebagai anak-anaknya boleh membuat permintaan graphQL:

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache
} from '@apollo/client'

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

Dalam klien const, APolloClient dimulakan dengan menghantar maklumat tentang tempat ia akan mencecah dari pautan yang ditentukan, dan cache daripada instance InMemoryCache, yang APolloClient gunakan untuk cache hasil pertanyaan.
Dalam httpLink, uri api graphQL dihantar dan pengepala yang diperlukan untuk permintaan ditentukan, dalam kes ini, satu yang menggunakan token Pembawa ditunjukkan.
Akhir sekali, pemulangan dan eksport ditentukan untuk membolehkan penggunaan dalam aplikasi.

Memandangkan ia adalah apl yang selepas log masuk menyimpan token dalam localStorage, dan anda mahu membenarkan permintaan graphQL untuk keseluruhan apl secara umum, ApolloProvider yang ditakrifkan dalam fail di atas digunakan:

import { ApolloProvider } from './contexts/ApolloContext'
import AppContent from './components/AppContent'

const token = localStorage.getItem('@tokenId')
// endpoint da sua api graphQL
const graphqlURI = 'https://www.example.com'

const App = () => {
  return (
    <ApolloProvider token={token} uri={graphqlURI}>
      <AppContent />
    </ApolloProvider>
  )
}

Dalam kes contoh ini, token sedang diambil dari localStorage (dalam contoh ini, seolah-olah ia disimpan dengan kekunci @tokenId di sana) dan uri ditakrifkan dalam fail itu sendiri, dihantar kepada ApolloProvider. AppContent sedang diluluskan sebagai anak kepada ApolloProvider, jadi semua yang terkandung di dalamnya, yang akan menjadi apl secara keseluruhan, akan dapat membuat permintaan graphQL.
Dalam amalan, mempunyai persekitaran yang berbeza untuk ujian dan pengeluaran, graphqlURI boleh datang daripada env yang ditakrifkan dengan uri setiap persekitaran.

Bermula daripada pertanyaan yang dipanggil pengguna yang ada pada api, yang mengembalikan nama dan profesion pengguna, fail dengan pertanyaan yang akan dipanggil akan ditakrifkan:

import { gql } from '@apollo/client'

const GET_USER = gql`
  query GetUser {
    user {
      name
      occupation
    }
  }
`

export default GET_USER

GET_USER sepadan dengan cara pertanyaan akan dipanggil oleh apl React dan pengguna nama pertanyaan yang dicari dalam api.

Dalam fail yang mentakrifkan AppContent, pertanyaan GET_USER akan dipanggil dan pemulangannya akan digunakan:

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache
} from '@apollo/client'

function ExampleApolloProvider({ children, token, uri }) {
  const httpLink = new HttpLink({
    uri: uri,
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

Kait useQuery akan melaksanakan pertanyaan yang ditakrifkan dalam GET_USER, mengembalikan pemuatan benar semasa permintaan tidak selesai, mengembalikan ralat jika permintaan gagal dan mengembalikan data apabila permintaan itu berjaya diselesaikan. Selagi tarikh belum dikembalikan, mesej Memuatkan... akan muncul pada skrin. Jika permintaan berakhir dengan ralat, ia akan memaparkan mesej Permintaan Gagal. Jika permintaan berjaya diselesaikan, nama dan profesion pengguna (nama dan pekerjaan) akan dipaparkan pada skrin.
Dengan cara ini, ApolloClient dikonfigurasikan untuk permintaan graphQL dan sedia untuk digunakan.

Kesimpulan

Ideanya adalah untuk membentangkan cara mengkonfigurasi APolloClient untuk membolehkan apl React membuat panggilan graphQL, menunjukkan definisi konteks, penggunaan konteks ini dan contoh cara melaksanakan pertanyaan.
Ikuti pautan ke dokumentasi ApolloClient untuk mereka yang ingin menyelidiki lebih mendalam.

Atas ialah kandungan terperinci Persediaan Pelanggan Apollo untuk permintaan graphQL dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!