React TanStack query を使ったデータの読み込みと更新

create-react-app アプリ名

npm install @tanstack/react-query

src//
  |-- api//
  |    `-- comments.js
  |-- App.js
  `-- index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient()

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

let Comments = [
    { id: 1, comment: "Hello" },
    { id: 2, comment: "World" },
]

export const getComment = () => {
    return delay().then(
        res => [...Comments],
        err => Promise.reject({ err }))
}

export const addComment = (input) => {
    return delay(200).then(
        res => {
            Comments.push({ id: Comments.length + 1, comment: input })
            return Comments
        },
        err => Promise.reject({ err })
    )
}

async function delay(ms = 500) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

import { useQuery } from '@tanstack/react-query'
import { getComment } from './api/comments';

function App() {
  const query = useQuery({
    queryKey: ["comments"],
    queryFn: () => getComment(),
  })

  if (query.isLoading) return <h1>Loading...</h1>
  if (query.isError) return <h1>{JSON.stringify(query.error)}</h1>

  return (
    <div className="App">
      {query.data.map(res => (
        <div key={res.id}>{res.id}  {res.comment}</div>
      ))}
    </div>
  );
}

export default App;

import { useQuery, useMutation } from '@tanstack/react-query'
import { useRef } from 'react';
import { addComment, getComment } from './api/comments';

function App() {
  const inputRef = useRef(null);
  const query = useQuery({
    queryKey: ["comments"],
    queryFn: () => getComment(),
  })

  const mutation = useMutation({
    mutationFn: input => addComment(input),
    onSuccess: (data, variables, context) => {
      //ミューテーションが成功すると起動し、ミューテーションの結果が渡されます。
    },
    onMutate: variables => {
      //ミューテーション関数が起動される前に起動し、ミューテーション関数が受け取るのと同じ変数が渡されます。
      return variables + 'context' //context
    }
  })

  const submit = () => {
    mutation.mutate(inputRef.current.value)
  }

  if (query.isLoading) return <h1>Loading...</h1>
  if (query.isError) return <h1>{JSON.stringify(query.error)}</h1>

  return (
    <div className="App">
      {query.data.map(res => (
        <div key={res.id}>{res.id}  {res.comment}</div>
      ))}
      {mutation.isLoading ? (
        'isAdding'
      ) : <>
        {mutation.isError ? (
          <div>{JSON.stringify(mutation.error.err)}</div>
        ) : null}
      </>}
      <input type="text" ref={inputRef} />
      <button onClick={submit}>Submit</button>
    </div>
  );
}

export default App;

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
    
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: input => addComment(input),
    onSuccess: (data, variables, context) => {
      queryClient.invalidateQueries(["comments"])
      // queryClient.setQueryData(["comments"], data)
    },
    onMutate: variables => {
      return variables + 'context' //context
    }
  })