我试图通过构建一个to-do应用来理解RTK Query，以便在React项目中用它替换thunk API，但这个问题阻碍了我这样做：

RTK查询服务：

export const apiSlice = createApi({
  reducerPath: "apiSlice",
  tagTypes: ["Todos"],
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3500/" }),
  endpoints: (builder) => ({
    getTodos: builder.query({
      query: () => "todos",
      providesTags: ["Todos"],
    }),
  }),
});

export const { useGetTodosQuery } = apiSlice;

store.js：

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { apiSlice } from "./services/api";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

setupListeners(store.dispatch);

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { store } from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

TodoList.js组件：

import React, { useState } from "react";
import { useGetTodosQuery } from "../services/api";
import { Todo } from "./Todo";

export const TodoList = () => {
  const { data: todos, isLoading } = useGetTodosQuery();
  //   const [todos, setTodos] = useState([]);

  return (
    <div>
      {todos?.map((todo) => (
        <Todo title={todo.title} key={todo.id} />
      ))}
    </div>
  );
};

Todo.jsx组件：

export const Todo = ({ title }) => {
  return (
    <div className="todo">
      <p>{title}</p>
    </div>
  );
};

我该如何着手解决这个问题？