异步数据的状态管理：React-Query

const GlobalContext = createContext({
  theme: 'dark',
  user: {},
  list: [],
  fetching: 'idle',
  error: null,
  setUser: (user) => {},
  fetch: () => {},
});

const App = () => {
  return (
    <GlobalContext.Provider>
      <Page />
    </GlobalContext.Provider>
  );
};

const Page = () => {
  return <Container />;
};

const Container = () => {
  return <Content />;
};

const Content = () => {
  const { user } = useContext(GlobalContext);
  return user ? <div>{user}</div> : 'need login';
};

const Card = () => {
  const handleClick = () => {
    // mobx代码
    globalState.updateDate();
    globalState.resetState();
  };

  return <button onClick={handleClick}>详情页</button>;
};

const ThemeSwith = () => {
  const [theme，setTheme] = useState('light');

  return (
    <div>
      <button onClick={() => setTheme(v => (v === 'light' ? 'dark' ： 'light'))}>
        {theme === 'light' ? '浅色' ： '深色'}
      </button>
    </div>
  );
};

const App = () => {
  const [list，setList] = useState([]);

  useEffect(() => {
    fetch('xxx').then(async res => {
      const data = await res.json();
      setList(data);
    });
  }，[]);

  return (
    <ul>
      {list.map(item => (
        <li>{item}</li>
      ))}
    </ul>
  );
};

const query = useQuery(['todos'], () => fetch('xxx'));

const query = useQuery(['todo', id], () => fetch('xxx'));

// App.jsx
import { QueryClient，QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

// 创建一个客户端实例
const queryClient = new QueryClient();

function App() {
  return (
    // 将实例使用Context的方式提供给整个App
    <QueryClientProvider client={queryClient}>
      <div>...</div>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

// api/todo.js
const API_PATH = 'https://jsonplaceholder.typicode.com';

export const getTodos = () =>
  fetch(API_PATH + '/posts').then((res) => res.json());

// TodoItem.jsx
const TodoItem = ({ todo }) => {
  // TODO:
  const handleDelete = () => {};

  // TODO:
  const handleToggle = () => {};

  return (
    <li>
      <input type="checkbox" value={todo.completed} onChange={handleToggle} />
      <span>{todo.title}</span>
      <button onClick={handleDelete}>删除</button>
    </li>
  );
};

export default TodoItem;

// TodoList.jsx
import { useQuery } from '@tanstack/React-Query';
import { getTodos } from '../api/todo';
import TodoItem from './TodoItem';

const TodoList = () => {
  const { data = [], isLoading } = useQuery(['todos'], () => getTodos());

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <TodoItem todo={item} />
      ))}
    </ul>
  );
};

export default TodoList;

import { QueryClient, QueryClientProvider } from '@tanstack/React-Query';
import TodoList from './components/TodoList';

const queryClient = new QueryClient();

function App() {
  return (
    // 将实例使用Context的方式提供给整个App
    <QueryClientProvider client={queryClient}>
      <TodoList />
    </QueryClientProvider>
  );
}

// CreateTodo.jsx
import { useState } from 'react';

const CreateTodo = ({ onCreate }) => {
  const [value, setValue] = useState('');

  const createTodo = () => {};

  const handleKeyUp = (e) => {
    if (e.key === 'Enter') {
      createTodo();
    }
  };

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyUp={handleKeyUp}
      />
      <button onClick={createTodo}>添加</button>
    </div>
  );
};

export default CreateTodo;

// api/todo.js
// 省略相同代码...

export const createTodo = body =>
  fetch(API_PATH + '/todo'，{
    method: 'POST',
    body: JSON。stringify(body),
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
  });

import { createTodo as createTodoApi } from '../api/todo';

const mutation = useMutation((body) => createTodoApi(body));

const createTodo = () => {
  mutation.mutate({
    userId: '1',
    title,
    completed: false,
  });
};

const createTodo = async () => {
  const newTodo = await createTodoApi();
  setList((prevTodos) => prevTodos.concat(newTodo));
};

const createTodo = async () => {
  const newTodo = await createTodoApi();
  const newTodos = await getTodos();
  setList(newTodos);
};

const queryClient = useQueryClient(); // 拿到query客户端
const mutation = useMutation((body) => createTodoApi(body), {
  onSuccess: (data, body) => {
    // 不请求接口
    queryClient.setQueryData(['todos'], (prevTodos) =>
      prevTodos.concat({
        ...data,
        id: prevTodos.length + 1,
      })
    );
    // 请求接口
    // queryClient。invalidateQueries(["todos"]);
  },
});

const useCreateTodo = () =>
  useMutation((body) => createTodoApi(body), {
    onSuccess: () => {
      queryClient.invalidateQueries(['todos', 'list']);
    },
  });

// 组件里面使用
const createTodo = useCreateTodo();
createTodo.mutate(newTodo, {
  // 当mutate完成并且还在当前页面时才会触发
  onSuccess: () => {
    alert('创建成功');
  },
});

// api/todo.js
export const deleteTodo = id =>
  fetch(API_PATH + '/todos' + id，{
    method： 'DELETE',
  })。then(res => res.json());

// TodoItem.jsx
import { useMutation,useQueryClient } from "@tanstack/React-Query";
import { deleteTodo as deleteTodoApi } from "../api/todo";

const TodoItem = ({ todo }) => {
  const queryClient = useQueryClient();
  const deleteTodo = useMutation(
    (id) => deleteTodoApi(id),
    {
      onSuccess： (_,id) => {
        // 不请求接口
        queryClient.setQueryData(['todos'],(prevData) => prevData.filter(data => data.id !== id))
        // 请求接口
        // queryClient.invalidateQueries(['todos'])
      }
    }
  );

  const handleDelete = () => {
    deleteTodo.mutate(todo.id);
  };

  return (
    // ...
  );
};

import { deleteTodo as deleteTodoApi,patchTodo as patchTodoApi } from '../api/todo';
import { useMutation,useQueryClient } from '@tanstack/React-Query';

const TodoItem = ({ todo }) => {
  const queryClient = useQueryClient();
  const patchTodo = useMutation(body => patchTodoApi(body)，{
    onSuccess: (_,{ id,completed }) => {
      // 不请求接口
      queryClient.setQueryData(['todos'],prevData =>
        prevData.map(data => {
          if (data.id === id) {
            return { ...data,completed };
          }
          return data;
        })
      );
      // 请求接口
      // queryClient.invalidateQueries(['todos']);
    },
  });

  const handleToggle = e => {
    const completed = e.target.checked;
    patchTodo.mutate({ id: todo.id,completed });
  };

  return (
    <li>
      <input type='checkbox' value={todo.completed} onChange={handleToggle} />
      {/* ... */}
    </li>
  );
};

export default TodoItem;

// hooks/todo.js
import { useMutation,useQueryClient } from '@tanstack/React-Query';
import { createTodo,deleteTodo,patchTodo } from '../api/todo';

// 这里只写一个...
// 其他的都是一样
export const useDeleteTodo = id => {
  const queryClient = useQueryClient();
  const deleteTodo = useMutation(id => deleteTodo(id),{
    onSuccess: (_,id) => {
      // 不请求接口
      queryClient.setQueryData(['todos'],prevData => prevData.filter(data => data.id !== id));
      // 请求接口
      // queryClient.invalidateQueries(["todos"]);
    },
  });
};

// TodoItem.jsx
const TodoItem = ({ todo }) => {
  const { deleteTodo,loading } = useDeleteTodo(todo.id);
  const { patchTodo,loading } = usePatchTodo(todo.id);

  const handleDelete = () => {
    deleteTodo.mutate(todo.id，{
      onSuccess: () => {
        alert('删除成功');
      },
    });
  };

  const handleToggle = e => {
    const completed = e.target.checked;
    patchTodo.mutate({ id: todo.id,completed });
  };

  return (
    <li>
      <input type='checkbox' value={todo.completed} onChange={handleToggle} />
      <span>{todo.title}</span>
      <button onClick={handleDelete}>删除</button>
    </li>
  );
};

const todoQueryKeys = {
  list: () => ['todos'],
  detail: (id) => ['todo', 'detail'.id],
};

const useTodo = (id) => {
  return useQuery(todoQueryKeys.detail(id), fetchFn);
};

const useTodos = () => {
  return useQuery(todoQueryKeys.list(), fetchFn);
};

const Content = () => {
  const isFetching = useIsFetching();
  return <div>{isFetching ? 'background update' : ''}</div>;
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // A: 全局设置
      staleTime: 1000 * 15, // 15秒数据才过期
    },
  },
});

// B: 批量局部设置
queryClient.setQueryDefaults(todoKeys.list(), { staleTime: 1000 * 60 }); // 60秒数据设置成过期

// C：对某一个Query设置
const useTodos = useQuery(todoKeys.list(), getTodos, { staleTime: 1000 * 60 });

const Pagination = () => {
  const [page, setPage] = useState(1);
  const { data, isLoading } = useQuery(['page', page], fetchFn);

  if (isLoading) {
    return 'loading';
  }

  return (
    <div>
      <button onClick={() => setPage(page - 1)}>上一页</button>
      <button onClick={() => setPage(page + 1)}>下一页</button>
      <ul>
        {data.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export const useTodos = () =>
  useQuery(['todos'], fetchTodos, {
    select: (data) => data.map((todo) => todo.title.toUpperCase()),
  });

/**
[ { title: 'TEST', id: 1, completed: false } ]
*/

// 方法一：将转化函数放到组件外
const transformTodoTitles = (data: Todos) =>
  data.map((todo) => todo.title.toUpperCase());

export const useTodos = () =>
  useQuery(['todos'], fetchTodos, {
    select: transformTodoTitles, // 如果是 undefined 则 select 不会执行
  });

// 方法二：使用 useCallback
export const useTodos = () => {
  const transformTodoTitles = React.useCallback(
    (data: Todos) => data.map((todo) => todo.title.toUpperCase()),
    []
  );
  return useQuery(['todos'], fetchTodos, {
    select: transformTodoTitles,
  });
};

const { data } = useQuery(['todo', todoId], fetchFn, {
  // 当 todoId 存在时，该 query 才会执行
  enabled: !!todoId,
});

const List = () => {
  const [list, setList] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState('idle');

  useEffect(() => {
    setFetching('fetching');
    fetch('url').then(
      (res) => {
        const data = await res.json();
        setList(data);
        setLoading('success');
        setError(null);
      },
      (err) => {
        setList([]);
        setLoading('idle');
        setError(err);
      }
    );
  }, []);

  // ...
};

const List = () => {
  const { data, isLoading, isError } = useQuery(() => fetch('url'));

  // ...
};

const globalState = {
  theme: 'dark',
  language: 'en',
  list: [],
  loading: [],
  error: [],
  pagination: {},
};

const globalState = {
  theme: 'dark',
  language: 'en',
};

const useList = useQuery(['list'], () => fetch('/list'));