Lravelで作成したAPIをReactで呼んで更新処理を行いたいです。

Question

実現したいこと

• Reactでデータの更新処理を行いたい。
• laravelでAPIを作成したのでReactでAPIを呼び出し更新を行いたい
• 現状const queryClient = useQueryClient();を記載するとエラーが出るため解消したい

前提

• laravelとReactを使用したSPAアップリを作成しようとしています。
• 現状はAPIで一覧取得と更新処理を作成しています。
• 一覧取得API呼び出しで一覧表示についてはできています。
• 更新処理についてReact側で実装している際にエラーが発生してしまいました。

使用しているバージョン

• "@tanstack/react-query": "^4.24.10",
• "@types/react": "^18.0.28",
• "@types/react-dom": "^18.0.11",
• "@types/react-router-dom": "^5.3.3",
• "@vitejs/plugin-react": "^3.1.0",
• "axios": "^1.1.2",

発生している問題・エラーメッセージ

react-dom.development.js:86 Warning: React has detected a change in the order of Hooks called by TaskList. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useContext                 useContext
3. useContext                 useContext
4. useContext                 useContext
5. useEffect                  useEffect
6. useState                   useState
7. useCallback                useCallback
8. useSyncExternalStore       useSyncExternalStore
9. useEffect                  useEffect
10. undefined                 useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at TaskList (http://[::1]:5173/resources/ts/pages/tasks/components/TaskList.tsx?t=1677688672593:24:7)
    at TaskPage
    at RenderedRoute (http://[::1]:5173/node_modules/.vite/deps/react-router-dom.js?v=e6c9ae10:2975:5)
    at Routes (http://[::1]:5173/node_modules/.vite/deps/react-router-dom.js?v=e6c9ae10:3320:5)
    at Router (http://[::1]:5173/node_modules/.vite/deps/react-router-dom.js?v=e6c9ae10:3267:15)
    at BrowserRouter (http://[::1]:5173/node_modules/.vite/deps/react-router-dom.js?v=e6c9ae10:3680:5)
    at Router
    at QueryClientProvider (http://[::1]:5173/node_modules/.vite/deps/@tanstack_react-query.js?v=e6c9ae10:2780:3)
    at App

Uncaught Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:16507:13)
    at updateReducer (react-dom.development.js:16568:14)
    at updateState (react-dom.development.js:17004:10)
    at Object.useState (react-dom.development.js:17915:16)
    at Object.useState (react.development.js:1622:21)
    at useMutation (useMutation.ts:83:28)
    at useUpdateDoneTask (TaskQuery.tsx:13:12)
    at TaskItem (TaskItem.tsx:6:28)
    at TaskList.tsx:18:21
    at Array.map (<anonymous>)

該当のソースコード

resources/ts/App.tsx

import { Router } from './Router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

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

export const App = () => {
    return (
        <QueryClientProvider client={queryClient}>
            <Router />
        </QueryClientProvider>
    )
}

resources/ts/pages/tasks/index.tsx

import { TaskInput } from './components/TaskInput';
import { TaskList } from './components/TaskList';

export const TaskPage = (): JSX.Element => {
    return (
        <>
            <TaskInput />
            <TaskList />
        </>
    );
}

resources/ts/pages/tasks/components/TaskItem.tsx

import { Task } from '../../../types/Task';
import { useUpdateDoneTask } from '../../../queries/TaskQuery';


export const TaskItem = (task: Task): JSX.Element => {
    const updateDoneTask = useUpdateDoneTask();
    return (
        <li key={task.id} className={task.is_done ? 'done' : ''} >
            <label className="checkbox-label">
                <input 
                    type="checkbox" 
                    className="checkbox-input" 
                    onClick={() => updateDoneTask.mutate(task)}
                />
            </label>
            <div><span>{task.title}</span></div>
            <button className="btn is-delete">削除</button>
        </li>
    );
}

resources/ts/queries/TaskQuery.tsx

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

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

export const useUpdateDoneTask = () => {
    // 下記を記載するとエラーが発生
    const queryClient = useQueryClient();

    return useMutation(api.updateDoneTask, {
        onSuccess: () => {
            queryClient.invalidateQueries(['tasks']);
        }
    });
}

resources/ts/api/TaskAPI.tsx

import axios from 'axios';
import { Task } from '../types/Task';

export const getTasks = async () =>{
    const { data } = await axios.get<Task[]>('api/tasks')
    return data
}

export const updateDoneTask = async ({ id, is_done }: Task) =>{
    const { data } = await axios.patch<Task[]>(
        `/api/tasks/update-done/${id}`,
        { is_done: !is_done }
    )
    console.log(data)
    return data
}

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::apiResource('/tasks', 'App\Http\Controllers\TaskController');
Route::patch('tasks/update-done/{task}', 'App\Http\Controllers\TaskController@updateDone');

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

app/Http/Controllers/TaskController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests\TaskRequest;
use App\Models\Task;

class TaskController extends Controller
{

~~~~略
    /**
     * is_doneの更新
     * 
     * @param  Task  $task
     * @param  Request  $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function updateDone(task $task, Request $request)
    {
        $task->is_done = $request->is_done;

        return $task->update()
            ? response()->json($task)
            : response()->json([], 500);
    }
}

Answer 1

■エラーについて
TaskItemの部分がQueryClientProviderの外部でレンダリングされた場合、QueryClientProviderのコンテキストがないというエラーが出ているのかと思います。

■対応について
TaskItemコンポーネントでuseQueryClientを使用する場合、TaskListコンポーネント内にQueryClientProviderを追加することで、TaskItem内でuseQueryClientが正常に使用できるかと思います。

ソースだと下記のようになるかとおもいます

import { TaskList } from '../components/tasks/TaskList';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

export const TaskPage = () => {
    return (
        <QueryClientProvider client={queryClient}>
            <TaskList />
        </QueryClientProvider>
    );
};

Comments

[tamago_3377]

ありがとうございます。試したところ解決できました。