React Query とデータベースを使用してデータキャッシュの一貫性保証を実現する-jsチュートリアル-php.cn

React Query とデータベースを使用してデータキャッシュの一貫性保証を実現する

王林

リリース： 2023-09-29 09:01:02

オリジナル

859 人が閲覧しました

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

React Query とデータベースを使用してデータキャッシュの一貫性保証を実現する

複雑なフロントエンドアプリケーションを開発する場合、データの取得と管理は重要な問題です。パフォーマンスとユーザーエクスペリエンスを向上させるために、多くの場合、キャッシュを使用してバックエンドデータに対する頻繁なリクエストを減らす必要があります。ただし、データの更新とキャッシュの一貫性に関しては、いくつかの課題に直面する可能性があります。この記事では、React Query とデータベースを活用してデータキャッシュの一貫性保証を実現する方法を紹介し、具体的なコード例を示します。

React Query は、フロントエンドアプリケーションでの非同期データの取得、キャッシュ、更新の管理に役立つ強力なデータ管理ライブラリです。その重要な機能の 1 つは、データのキャッシュと有効期限を自動的に処理し、キャッシュされたデータが常にバックエンドデータと一致するようにすることです。

React Query とデータベースを使用してデータキャッシュの一貫性保証を実現する方法を示すために、単純なブログアプリケーションを例に挙げます。ブログ投稿のデータを取得および更新できるバックエンド API があるとします。私たちの目標は、ユーザーがブログ投稿を読むときにフロントエンドでブログ投稿をキャッシュし、バックエンドデータが更新されたときにキャッシュを自動的に更新することです。

まず、React プロジェクトに React Query をインストールする必要があります。 npm または Yarn:

npm install react-query

ログイン後にコピー

を使用して React Query をインストールできます。その後、React コンポーネントで React Query を使用できるようになります。まず、データクエリのキャッシュと更新の管理を担当する QueryClient を設定する必要があります。

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

const queryClient = new QueryClient();

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

ログイン後にコピー

次に、カスタム 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;
  });
}

ログイン後にコピー

ページのレンダリング時にブログ投稿データを取得してキャッシュするためのカスタムフック:

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>
  );
}

ログイン後にコピー

これで、BlogPosts コンポーネントをレンダリングするたびに、React Query が自動的にキャッシュからデータを取得します。ブログの投稿。データがキャッシュに存在しない場合、または期限切れの場合、React Query は useBlogPosts フックで定義したクエリを自動的に使用して最新のデータを取得します。

キャッシュされたデータとバックエンドデータの間の一貫性を確保するために、データの更新も処理する必要があります。ブログアプリケーションに、新しいブログ投稿を作成する機能があるとします。新しい記事を作成した後、キャッシュ内の記事データが適時に更新されるようにする必要があります。

これを実現するには、useMutation フックを使用して、新しいブログ投稿を作成するためのミューテーションを定義します。

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

ログイン後にコピー

次に、新しいブログ投稿を作成するときにロジックを作成します。 mutate メソッドを使用してキャッシュを手動で更新できます:

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

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

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

ログイン後にコピー

このようにして、新しいブログ投稿が正常に作成されると、React Query はキャッシュされたデータを自動的に更新します。次回 BlogPosts コンポーネントがレンダリングされるときにページが表示されます。

要約すると、React Query とデータベースを使用してデータキャッシュの一貫性を確保するプロセスでは、次の手順を実行する必要があります: