Pengurusan Data dengan React Query dan Pangkalan Data: Panduan Amalan Terbaik

Pengenalan:
Dalam pembangunan front-end moden, Mengurus data adalah tugas yang sangat penting. Memandangkan permintaan pengguna untuk prestasi tinggi dan kestabilan terus meningkat, kami perlu mempertimbangkan cara untuk mengatur dan mengurus data aplikasi dengan lebih baik. React Query ialah alat pengurusan data yang berkuasa dan mudah digunakan yang menyediakan cara mudah dan fleksibel untuk mengendalikan pengambilan semula, kemas kini dan caching data. Artikel ini menerangkan amalan terbaik untuk pengurusan data menggunakan React Query dan pangkalan data serta menyediakan contoh kod khusus.

1 Pasang React Query dan kebergantungan yang berkaitan
Pertama, kita perlu memasang React Query dan kebergantungan yang berkaitan. Pakej ini boleh dipasang menggunakan npm atau yarn.

$ npm install react-query react-router-dom

2 Konfigurasikan React QueryProvider
Dalam fail entri, kami perlu menambah React QueryProvider pada aplikasi. React QueryProvider bertanggungjawab untuk menyediakan konteks berkaitan pengurusan data kepada komponen dalam aplikasi anda.

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

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

3 Mulakan permintaan pertanyaan
Dalam React Query, kami boleh menggunakan cangkuk useQuery untuk memulakan permintaan pertanyaan. Parameter pertama cangkuk useQuery ialah rentetan yang mewakili kunci data yang akan diperolehi. Parameter kedua ialah fungsi tak segerak, yang digunakan untuk mendapatkan data sebenarnya.

import { useQuery } from 'react-query';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

4 Kemas kini data
Selain mendapatkan data, React Query juga menyediakan cangkuk useMutation untuk mengendalikan kemas kini data. Cangkuk useMutation menerima fungsi tak segerak yang digunakan untuk benar-benar mengemas kini data. Ia mengembalikan tatasusunan di mana elemen pertama ialah fungsi yang mencetuskan operasi kemas kini. Selain itu, kami juga boleh menggunakan beberapa pilihan untuk mengawal tingkah lakunya apabila mengeluarkan permintaan kemas kini.

import { useMutation } from 'react-query';

function UpdateUserForm({ user }) {
  const mutation = useMutation(updatedUser => {
    return fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedUser),
    });
  });

  const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const updatedUser = {
      name: formData.get('name'),
      age: formData.get('age'),
    };
    mutation.mutate(updatedUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="number" name="age" defaultValue={user.age} />
      <button type="submit">Update</button>
    </form>
  );
}

5 Data Cache
React Query akan cache data yang ditanya secara lalai dan mengemas kininya apabila diperlukan. Kami boleh menggunakan kaedah useQueryClient hook dan queryClient.setQueryData untuk mengemas kini data secara manual. Kenal pasti dan kemas kini data dengan kunci yang ditanya.

import { useQuery, useQueryClient } from 'react-query';

function UserList() {
  const queryClient = useQueryClient();

  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  const handleUpdateUser = user => {
    // update the data in the cache
    queryClient.setQueryData('users', old => {
      const updatedData = old.map(u => {
        if (u.id === user.id) {
          return {
            ...u,
            name: user.name,
            age: user.age,
          };
        }
        return u;
      });
      return updatedData;
    });
  };

  // ...
}

6. Menggunakan pangkalan data
React Query tidak mengehadkan kaedah yang kami gunakan untuk mendapatkan data. Jika data kami disimpan dalam pangkalan data, kami hanya perlu menulis kod yang sepadan dalam fungsi pertanyaan untuk mengendalikan pangkalan data.

import { useQuery } from 'react-query';
import { db } from 'path/to/database';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const users = await db.get('users');
    return users;
  });

  // ...
}

7 Ringkasan
Dengan menggunakan React Query dan pangkalan data, kami boleh mengatur dan mengurus data dalam aplikasi dengan lebih baik dan memberikan pengalaman pengguna yang baik. Artikel ini menyediakan panduan amalan terbaik untuk pengurusan data menggunakan React Query, dengan contoh kod khusus. Harap ini membantu anda!

Atas ialah kandungan terperinci Pengurusan Data dengan Pertanyaan React dan Pangkalan Data: Panduan Amalan Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!