Apollo Client for GraphQL State Management in React

Apollo Client ialah perpustakaan JavaScript popular yang memudahkan pengurusan data untuk API GraphQL. Ia membolehkan anda mengurus kedua-dua data tempatan dan jauh dalam aplikasi React anda dengan cekap dan menyediakan ciri berkuasa seperti caching, kemas kini masa nyata, penomboran dan kelompok pertanyaan. Dengan Apollo Client, pembangun boleh berinteraksi dengan pelayan GraphQL menggunakan pertanyaan dan mutasi dengan cara yang lancar dan deklaratif.

Apollo Client berintegrasi dengan baik dengan React dan biasanya digunakan untuk mengurus keadaan dan melaksanakan operasi seperti mengambil, menyimpan cache dan mengemas kini data daripada pelayan GraphQL. Ia mengurangkan keperluan untuk perpustakaan pengurusan negeri yang kompleks seperti Redux dan menawarkan pendekatan yang lebih mudah untuk mengurus data yang terikat dengan komponen UI anda.

1. Konsep Teras Pelanggan Apollo

1. ApolloProvider

Untuk menggunakan Apollo Client dalam aplikasi React, anda mesti terlebih dahulu membungkus aplikasi anda dengan komponen ApolloProvider. Komponen ini menjadikan contoh Pelanggan Apollo tersedia di seluruh pepohon komponen anda melalui API Konteks React.

Contoh:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

• ApolloProvider menyediakan akses kepada contoh Pelanggan Apollo merentas apl anda.
• InMemoryCache ialah pelaksanaan cache lalai yang digunakan oleh Apollo Client untuk menyimpan hasil pertanyaan dan mengoptimumkan pengambilan berikutnya.

2. Pertanyaan

Dalam Pelanggan Apollo, pertanyaan digunakan untuk mengambil data daripada pelayan GraphQL. Anda boleh menggunakan cangkuk useQuery untuk mengambil data dalam komponen React anda. Cangkuk ini secara automatik mengendalikan pemuatan, keadaan ralat dan caching untuk anda.

Contoh:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

• useQuery melaksanakan pertanyaan GET_ITEMS apabila komponen dipasang dan menyediakan keadaan pemuatan, ralat dan data.
• Apollo Client menyimpan cache secara automatik respons dan menggunakannya semula apabila pertanyaan yang sama dilaksanakan semula.

3. Mutasi

Mutasi digunakan untuk mengubah suai data pada pelayan (cth., mencipta, mengemas kini atau memadam rekod). Anda boleh menggunakan cangkuk useMutation untuk melakukan mutasi dalam komponen React anda.

Contoh:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

• useMutation digunakan untuk memanggil mutasi ADD_ITEM.
• Pilihan pembolehubah menghantar data input kepada mutasi.
• Anda boleh menggunakan onCompleted untuk mengendalikan data tindak balas selepas mutasi berjaya.

4. Cache

Apollo Client menggunakan caching secara lalai. Ciri ini membantu mengelakkan permintaan rangkaian yang tidak diperlukan dan meningkatkan prestasi dengan menyimpan hasil pertanyaan sebelumnya dalam cache dalam memori.

Contoh:

Apabila anda membuat pertanyaan, Apollo Client menyemak cache secara automatik untuk melihat sama ada data telah diambil. Jika data wujud, ia akan mengembalikannya dengan segera. Jika tidak, ia menghantar permintaan rangkaian.

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

• Kali pertama anda memanggil useQuery, Apollo Client mengambil data daripada rangkaian.
• Kali seterusnya pertanyaan yang sama dilaksanakan, Apollo Client menyediakan data daripada cache, meningkatkan prestasi.

5. Penomboran dan Ambil Lagi

Apabila berurusan dengan set data yang besar, penomboran selalunya diperlukan. Apollo Client menyediakan fungsi fetchMore untuk memuatkan data tambahan sebagai tindak balas kepada tindakan pengguna seperti menatal atau mengklik "Muat Lagi."

Contoh:

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

// Define a mutation to add a new item
const ADD_ITEM = gql`
  mutation AddItem($name: String!, $description: "String!) {"
    addItem(name: $name, description: "$description) {"
      id
      name
      description
    }
  }
`;

const AddItemForm = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [addItem, { loading, error }] = useMutation(ADD_ITEM);

  const handleSubmit = (e) => {
    e.preventDefault();
    addItem({
      variables: { name, description },
      onCompleted: (data) => {
        // Handle the data after the mutation is successful
        console.log('Item added:', data.addItem);
      },
    });
  };

  if (loading) return <p>Adding item...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="text"
        placeholder="Description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button type="submit">Add Item</button>
    </form>
  );
};

export default AddItemForm;

• fetchMore membolehkan anda memuatkan lebih banyak data apabila diperlukan, seperti apabila pengguna mencapai bahagian bawah senarai.

2. Faedah Menggunakan Pelanggan Apollo untuk Pengurusan Negeri GraphQL

1. Pengambilan Data yang Cekap

Apollo Client memudahkan pengambilan data dengan GraphQL, memastikan aplikasi anda hanya mendapatkan semula data yang diperlukan.

2. Caching Automatik

Dengan caching terbina dalamnya, Apollo Client mengurangkan bilangan permintaan kepada pelayan dan menjadikan aplikasi anda lebih responsif dengan menyampaikan data daripada cache.

3. Data Masa Nyata

Apollo Client menyokong langganan, yang membolehkan anda mendengar kemas kini data masa nyata. Ini berguna untuk membina aplikasi masa nyata seperti apl sembang atau papan pemuka langsung.

4. Pengambilan Data Pengisytiharan

Apollo Client membenarkan anda mengambil data secara deklaratif menggunakan pertanyaan GraphQL, menjadikan komponen React anda lebih mudah dan lebih mudah untuk difikirkan.

5. UI yang optimis

Apollo Client menyediakan sokongan untuk kemas kini UI yang optimistik, membolehkan anda mengemas kini UI sebelum pelayan mengesahkan perubahan. Ini menghasilkan pengalaman pengguna yang lebih lancar.

3. Contoh Aplikasi Penuh Pelanggan Apollo

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

4. Kesimpulan

Apollo Client ialah alat yang berkuasa untuk mengurus data GraphQL dalam aplikasi React. Ia menyediakan sokongan terbina dalam untuk menyoal dan mengubah data, caching, penomboran dan kemas kini data masa nyata. Dengan menggunakan Apollo Client, anda boleh menyelaraskan proses pengurusan data anda, meningkatkan prestasi dan menumpukan pada membina aplikasi anda daripada mengurus sistem pengurusan keadaan yang kompleks.

Atas ialah kandungan terperinci Pelanggan Apollo untuk Pengurusan Negeri GraphQL dalam React: Memudahkan Pengambilan Data dan Caching. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!