Untitled Project

script.react.tsx

import { useQuery, QueryClientProvider, QueryClient } from "react-query";
import useSWR, { SWRConfig } from 'use-swr'

const queryClient = new QueryClient();

export default function Application({ children }) {
  return (
    <SWRConfig value={{}}>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
    </SWRConfig>
  );
}
function App() {
  const q = useQuery(["todos"], {
    refetchOnWindowFocus: false,
    initialData: 2,
    queryFn: async () => {
      const r = await fetch("https://jsonplaceholder.typicode.com/todos/");
      return r.json();
    },
  });


  const r = useSWR('todos', {
    refetchOnWindowFocus: false,
    initialData: 2,
    fetcher: async () => {
      const r = await fetch("https://jsonplaceholder.typicode.com/todos/");
      return r.json();
    },
  });

  {r.}


  return (
    <div className="grid grid-cols-2">
    <div>
      <h2 className="text-xl font-bold">React Query</h2>
      {q.isLoading ? "Loading..." : "Loaded"}
      <hr />
      {q.isFetched ? "Fetched" : "Not fetched"}
      <hr />
      {q.status}
      <hr />
      {q.isRefetching ? "Refetching" : "Not refetching"}
      <hr />
      <button onClick={() => q.refetch()}>Refetch</button>
    </div>
    <div>
      <h2 className="text-xl font-bold">SWR</h2>
      {r.is ? "Loading..." : "Loaded"}
      <hr />
      {q.isFetched ? "Fetched" : "Not fetched"}
      <hr />
      {q.status}
      <hr />
      {q.isRefetching ? "Refetching" : "Not refetching"}
      <hr />
      <button onClick={() => q.refetch()}>Refetch</button>
    </div>
    </div>
  );
}

Untitled_Project.md

Untitled Project

A project created by Rafau on LiveCodes.