react-query example

import React from 'react';
import { render } from 'react-dom';
import { QueryClientProvider, QueryClient, useQuery } from 'react-query';

const URL = 'https://randomuser.me/api/?results=5&inc=name';

const One = () => {
  const { error, data, isLoading, refetch } = useQuery('test', () =>
    fetch(URL).then(response => response.json())
  );

  if (isLoading) return <span>Loading...</span>

  if (error) return <span>Error: {error.message} <button onClick={refetch}>retry</button></span>

  return (
    <div>
      <ul>
        {
          data.results.map((item, key) => <li key={key}>{item.name.first} {item.name.last}</li>)
        }
      </ul>
      <button onClick={refetch}>Refetch</button>
    </div>
  )
}

const Two = () => {
  const { error, data, isLoading, refetch } = useQuery('test', () =>
    fetch(URL).then(response => response.json())
  );

  if (isLoading) return <span>Loading...</span>

  if (error) return <span>Error: {error.message} <button onClick={refetch}>retry</button></span>

  return (
    <div>
      <ul>
        {
          data.results.map((item, key) => <li key={key}>{item.name.first} {item.name.last}</li>)
        }
      </ul>
      <button onClick={refetch}>Refetch</button>
    </div>
  )
}

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <One />
      <Two />
    </QueryClientProvider>
  )
}

render(
  <App />,
  document.getElementById('root')
);