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 とデータベースを使用してデータ キャッシュの一貫性を確保するプロセスでは、次の手順を実行する必要があります:

1. React Query の QueryClient をインストールして設定します。
2. データ クエリを処理するカスタム フックを作成します。
3. コンポーネントでフックを使用してデータを取得し、キャッシュします。
4. useMutation フックを使用して、データ更新ロジックを定義します。
5. データ更新を手動でトリガーし、更新の成功または失敗を処理します。

上記の手順により、React Query とデータベースを使用してデータ キャッシュの一貫性を保証し、フロントエンド アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。

上記は、React Query とデータベースを使用してデータ キャッシュの一貫性を確保することに関する記事の内容であり、詳細なコード例と手順が含まれています。お役に立てれば！

以上がReact Query とデータベースを使用してデータ キャッシュの一貫性保証を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。