Gunakan React Query dan pangkalan data untuk mencapai jaminan konsistensi cache data-tutorial js-php.cn

Gunakan React Query dan pangkalan data untuk mencapai jaminan konsistensi cache data

王林

Lepaskan： 2023-09-29 09:01:02

asal

836 orang telah melayarinya

利用 React Query 和数据库实现数据缓存一致性保证

Menggunakan React Query dan pangkalan data untuk mencapai jaminan konsistensi cache data

Apabila membangunkan aplikasi bahagian hadapan yang kompleks, pemerolehan dan pengurusan data adalah Kunci soalan. Untuk meningkatkan prestasi dan pengalaman pengguna, kami selalunya perlu menggunakan caching untuk mengurangkan permintaan kerap untuk data belakang. Walau bagaimanapun, kami mungkin menghadapi beberapa cabaran apabila melibatkan kemas kini data dan konsistensi cache. Dalam artikel ini, kami akan memperkenalkan cara untuk memanfaatkan React Query dan pangkalan data untuk mencapai jaminan konsistensi cache data, dan menyediakan contoh kod khusus.

React Query ialah perpustakaan pengurusan data yang berkuasa yang membantu kami mengurus pengambilan data tak segerak, caching dan pengemaskinian dalam aplikasi bahagian hadapan. Salah satu ciri pentingnya ialah ia mengendalikan caching dan tamat tempoh data secara automatik, memastikan data yang dicache sentiasa konsisten dengan data bahagian belakang.

Untuk menunjukkan cara menggunakan React Query dan pangkalan data untuk mencapai jaminan konsistensi cache data, kami akan mengambil aplikasi blog ringkas sebagai contoh. Katakan kita mempunyai API bahagian belakang yang melaluinya kita boleh mendapatkan dan mengemas kini data untuk catatan blog. Matlamat kami adalah untuk menyimpan catatan blog di bahagian hadapan semasa pengguna membacanya dan mengemas kini cache secara automatik apabila data bahagian belakang dikemas kini.

Pertama, kita perlu memasang React Query dalam projek React. Kita boleh memasang React Query menggunakan npm atau yarn:

npm install react-query

Salin selepas log masuk

Kemudian, kita boleh menggunakan React Query dalam komponen React. Mula-mula kami perlu menyediakan QueryClient, yang akan bertanggungjawab untuk mengurus caching dan mengemas kini pertanyaan data: QueryClient，它将负责管理数据查询的缓存和更新:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* App content */}
    </QueryClientProvider>
  );
}

Salin selepas log masuk

接下来，我们可以创建一个自定义的 useBlogPosts 钩子来获取博客文章的数据。在该钩子中，我们使用 useQuery 钩子来定义一个查询，并通过 axios 或其他网络请求库从后端获取数据:

import { useQuery } from 'react-query';
import axios from 'axios';

function useBlogPosts() {
  return useQuery('blogPosts', async () => {
    const response = await axios.get('/api/blog/posts');
    return response.data;
  });
}

Salin selepas log masuk

在组件中使用我们的自定义钩子来获取博客文章数据，并在渲染页面时进行缓存:

function BlogPosts() {
  const { data: blogPosts, isLoading, isError } = useBlogPosts();

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

  if (isError) {
    return <div>Error loading blog posts</div>;
  }

  return (
    <div>
      {blogPosts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Salin selepas log masuk

现在，每当我们渲染 BlogPosts 组件时，React Query 将自动从缓存中获取博客文章的数据。如果数据在缓存中不存在或已过期，React Query 将自动使用我们在 useBlogPosts 钩子中定义的查询来获取最新的数据。

为了保证缓存的数据与后端数据的一致性，我们还需要处理数据的更新。在我们的博客应用中，假设我们有一个功能用于创建新的博客文章。在创建新文章后，我们需要确保缓存中的文章数据得到及时更新。

为了实现这一点，我们可以使用 useMutation 钩子来定义一个用于创建新博客文章的 mutation:

function useCreateBlogPost() {
  return useMutation((postData) => axios.post('/api/blog/posts', postData));
}

Salin selepas log masuk

然后，在我们创建新博客文章的逻辑中，我们可以使用 mutate 方法来手动更新缓存:

function CreateBlogPost() {
  const { mutate } = useCreateBlogPost();

  const handleCreatePost = async (postData) => {
    await mutate(postData, {
      onSuccess: () => {
        // 缓存更新成功后的回调逻辑
      },
      onError: () => {
        // 缓存更新失败后的回调逻辑
      },
    });
  };

  return (
    <div>
      {/* 表单用于创建新的博客文章，提交时调用 handleCreatePost */}
    </div>
  );
}

Salin selepas log masuk

通过这种方式，当我们成功创建新的博客文章时，React Query 将自动更新缓存的数据，以便在下一次渲染 BlogPosts 组件时更新页面。

总结起来，在利用 React Query 和数据库实现数据缓存一致性保证的过程中，我们需要做以下几个步骤：

安装并设置 React Query 的 QueryClient。
创建一个自定义的钩子来处理数据的查询。
在组件中使用钩子来获取数据并进行缓存。
使用 useMutationrrreee

useBlogPosts tersuai

useQuery

axios

rrreee#🎜🎜 # Gunakan cangkuk tersuai kami dalam komponen untuk mendapatkan data catatan blog dan cachenya semasa memaparkan halaman:

Sekarang, apabila kami memaparkan komponen BlogPosts, React Query akan secara automatik ambil data catatan blog daripada cache. Jika data tidak wujud dalam cache atau telah tamat tempoh, React Query akan secara automatik menggunakan pertanyaan yang kami takrifkan dalam cangkuk useBlogPosts untuk mendapatkan data terkini.

Untuk memastikan konsistensi data cache dan data belakang, kami juga perlu memproses kemas kini data. Dalam aplikasi blog kita, katakan kita mempunyai fungsi untuk membuat catatan blog baharu. Selepas mencipta artikel baharu, kami perlu memastikan data artikel dalam cache dikemas kini tepat pada masanya.

Untuk mencapai ini, kita boleh menggunakan cangkuk useMutation untuk menentukan mutasi untuk mencipta catatan blog baharu:#🎜🎜#rrreee#🎜🎜#Kemudian, dalam In kami logik mencipta catatan blog baharu, kita boleh menggunakan kaedah mutate untuk mengemas kini cache secara manual: #🎜🎜#rrreee#🎜🎜#Dengan cara ini, apabila kami berjaya mencipta catatan blog baharu, React Query akan mengemas kini data cache secara automatik supaya halaman dikemas kini pada kali berikutnya komponen BlogPosts dipaparkan. #🎜🎜##🎜🎜#Ringkasnya, dalam proses menggunakan React Query dan pangkalan data untuk memastikan ketekalan cache data, kita perlu melakukan langkah berikut: #🎜🎜#

useMutation

Atas ialah kandungan terperinci Gunakan React Query dan pangkalan data untuk mencapai jaminan konsistensi cache data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!