这篇文章的目的是什么。

• Reactの理解とアウトプット、振り返り用

• Reactでよく使われている基本的な技術を言語化できるようする

React-toastifyについて

简而言之

• React-toastifyとは

• React-toastifyインストール

• React-toastify使用例

【番外】オプションについて

React-toastify 是什么?

安装React-toastify

使用下述命令进行安装。

npm i -D react-toastify

React-toastify的用法。

读取最顶层（最近的）组件。

通过这样做，可以在所有子组件中使用。

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

<ToastContainer />

记录的例子

只要上述的代码中包含了@tanstack/react-query相关的内容，就不会有问题，因为它是基于API进行实现的。

import { Router } from './Router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retry: false
        },
        mutations: {
            retry: false
        }
    }
});

export const App = () => {
    return (
        <QueryClientProvider client={queryClient}>
            <Router />
            <ToastContainer 
                closeOnClick
                theme="colored" 
            />
        </QueryClientProvider>
    )
}

请尝试在React-toastify官方文档中查看有关 closeOnClick theme=”colored” 的选项，并进行相应的行为和样式更改。

在子组件中，您可以通过以下方式调用toast。

import { toast } from 'react-toastify';
// 引数に表示したいエラーメッセージを記載
toast.error('更新に失敗しました')

记载的例子

在更新处理失败时，我们使用toast来显示错误消息。

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import * as api from '../api/TaskAPI';
import { toast } from 'react-toastify';

export const useTasks = () => {
    return useQuery(['tasks'],async () => api.getTasks())
}

export const useUpdateDoneTask = () => {
    const queryClient = useQueryClient();
    // 第一引数：API
    // 第二引数：コールバックの処理
    return useMutation(api.updateDoneTask, {
        onSuccess: () => {
            // コンポーネントの再描画,引数はkeyとなる文字列
            queryClient.invalidateQueries(['tasks']);
        },
        onError: () => {
            // エラーmessageはreact-toastifyのtoastのerrorメソッドを使用
            // 引数に表示したいエラーmessageを記載
            toast.error('更新に失敗しました');
        }
    });
}

通过这样做，当更新处理失败时，可以显示类似于我之前提供的第一个GIF中的错误消息。

【附加】选项