Sediakan Pelanggan Apollo untuk permintaan graphQL dalam React

pengenalan

Artikel ini akan menunjukkan cara menyediakan apl React untuk permintaan graphQL menggunakan perpustakaan ApolloClient. Matlamatnya ialah untuk menunjukkan cara mengkonfigurasi apl dan memberikan contoh cara membuat permintaan.

Libs

• @apollo/client: lib yang membolehkan pengurusan keadaan dan membuat permintaan graphQL
• graphql: lib yang membenarkan menghuraikan pertanyaan GraphQL

Untuk menambah lib pada projek:

benang tambah @apollo/client graphql --dev

Konfigurasi

Di bawah, 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 }

In const client, ApolloClient dimulakan, menyatakan titik akhir melalui pautan yang ditentukan dan cache menggunakan instance InMemoryCache, yang ApolloClient gunakan untuk cache hasil pertanyaan.
Dalam httpLink, uri api graphQL ditetapkan, bersama-sama dengan pengepala yang diperlukan untuk permintaan. Dalam contoh ini, token Pembawa digunakan.
Akhir sekali, pemulangan dan eksport ditentukan untuk membenarkan penggunaannya di dalam apl.

Memandangkan bahawa ini ialah apl yang mana token disimpan dalam localStorage selepas log masuk, dan matlamatnya adalah untuk mendayakan permintaan graphQL di seluruh apl, ApolloProvider yang ditakrifkan dalam fail sebelumnya digunakan:

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

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

const App = () => {
  return (
    <apolloprovider token="{token}" uri="{graphqlURI}">
      <appcontent></appcontent>
    </apolloprovider>
  )
}

Dalam contoh ini, token diambil daripada localStorage (dalam kes ini, seolah-olah ia disimpan dengan kekunci @tokenId), dan uri ditakrifkan di dalam fail yang sama, kemudian diserahkan kepada ApolloProvider. AppContent diluluskan sebagai anak kepada ApolloProvider, bermakna semua yang terkandung di dalamnya, keseluruhan apl, akan dapat membuat permintaan graphQL.
Dalam amalan, apabila mempunyai persekitaran yang berbeza untuk ujian dan pengeluaran, graphqlURI boleh datang daripada pembolehubah persekitaran, dengan uri untuk setiap persekitaran ditakrifkan sewajarnya.

Bermula dengan pertanyaan yang dipanggil pengguna yang didedahkan api, yang mengembalikan nama dan pekerjaan pengguna, fail akan ditakrifkan dengan pertanyaan yang akan dipanggil:

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 dalam apl React dan pengguna ialah nama pertanyaan yang akan digunakan daripada 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 sebagai benar semasa permintaan masih dalam proses, mengembalikan ralat jika permintaan gagal dan mengembalikan data apabila permintaan berjaya diselesaikan. Sehingga data dikembalikan, ia akan memaparkan mesej Memuatkan... pada skrin. Jika permintaan berakhir dengan ralat, ia akan memaparkan mesej Permintaan gagal. Jika permintaan berjaya, nama pengguna dan pekerjaan (nama dan pekerjaan) akan dipaparkan pada skrin.
Dengan cara ini, ApolloClient dikonfigurasikan untuk permintaan graphQL dan sedia untuk digunakan.

Kesimpulan

Ideanya adalah untuk menunjukkan cara mengkonfigurasi ApolloClient untuk membenarkan apl React membuat panggilan graphQL, menunjukkan definisi konteks, penggunaan konteks ini dan contoh cara melaksanakan pertanyaan.
Berikut ialah pautan kepada dokumentasi ApolloClient untuk sesiapa sahaja yang ingin menyelam lebih dalam.

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