React ?? ? ??????? ??? ??? ??: ?? ?? ???

???:
?? ????? ???? ??? ??? ?? ??? ?????. ???? ???? ?? ???? ??? ?? ???? ?? ?????? ???? ?? ????? ???? ???? ??? ???? ???. React Query? ??? ??, ???? ? ??? ???? ???? ??? ??? ???? ???? ???? ?? ??? ?? ?????. ? ???? React Query? ??????? ??? ??? ?? ?? ??? ???? ???? ?? ??? ?????.

1. React Query ? ?? ??? ??
?? React Query ? ?? ???? ???? ???. ??? ???? npm ?? Yarn? ???? ??? ? ????.

$ npm install react-query react-router-dom

2. React QueryProvider ??
?? ???? ??????? React QueryProvider? ???? ???. React QueryProvider? ??????? ?? ??? ??? ?? ?? ????? ???? ??? ?????.

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

3. ?? ?? ??
React Query??? useQuery ??? ???? ?? ??? ??? ? ????. useQuery ??? ? ?? ????? ??? ???? ?? ???? ??????. ? ?? ????? ??? ???? ???? ? ???? ??? ?????.

import { useQuery } from 'react-query';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

4. ??? ????
???? ?? ? ??? React Query? ??? ????? ???? ?? useMutation ??? ?????. useMutation ??? ??? ???? ?????? ? ???? ??? ??? ?????. ? ?? ??? ???? ??? ????? ??? ??? ?????. ?? ???? ??? ??? ? ?? ??? ???? ??? ??? ?? ????.

import { useMutation } from 'react-query';

function UpdateUserForm({ user }) {
  const mutation = useMutation(updatedUser => {
    return fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedUser),
    });
  });

  const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const updatedUser = {
      name: formData.get('name'),
      age: formData.get('age'),
    };
    mutation.mutate(updatedUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="number" name="age" defaultValue={user.age} />
      <button type="submit">Update</button>
    </form>
  );
}

5. ??? ??
React Query? ????? ??? ???? ???? ???? ??? ? ???????. useQueryClient ?? ? queryClient.setQueryData ???? ???? ???? ???? ????? ? ????. ??? ?? ???? ???? ???????.

import { useQuery, useQueryClient } from 'react-query';

function UserList() {
  const queryClient = useQueryClient();

  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  const handleUpdateUser = user => {
    // update the data in the cache
    queryClient.setQueryData('users', old => {
      const updatedData = old.map(u => {
        if (u.id === user.id) {
          return {
            ...u,
            name: user.name,
            age: user.age,
          };
        }
        return u;
      });
      return updatedData;
    });
  };

  // ...
}

6. ?????? ??
React ??? ???? ?? ? ???? ??? ???? ????. ???? ??????? ???? ?? ?? ?? ??? ?? ??? ????? ?? ??????? ??? ? ????.

import { useQuery } from 'react-query';
import { db } from 'path/to/database';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const users = await db.get('users');
    return users;
  });

  // ...
}

Seven.Summary
React Query? ??????? ???? ??????? ???? ? ? ???? ??? ? ??? ?? ??? ??? ??? ? ????. ? ????? ???? ?? ??? ?? React ??? ??? ??? ??? ?? ?? ?? ??? ?????. ??? ???? ??? ??? ????!

? ??? React ?? ? ??????? ??? ??? ??: ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!