Skip to content

Instantly share code, notes, and snippets.

@NaveenDA
Last active May 4, 2023 07:39
Show Gist options
  • Save NaveenDA/b60e62d49bbb345fd1732e9490f25a68 to your computer and use it in GitHub Desktop.
Save NaveenDA/b60e62d49bbb345fd1732e9490f25a68 to your computer and use it in GitHub Desktop.
import React,{useState} from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
const queryClient = new QueryClient();
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
);
}
function Example() {
const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
fetch(
"https://api.github.com/repos/tannerlinsley/react-query"
).then((res) => res.json())
);
const [count, setCount] = useState(0);
if (isLoading) return "Loading...";
if (error) return "An error has occurred: " + error.message;
return (
<div>
<button onClick={()=>setCount(count+1)}>+</button>
<button>{count}</button>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>👀 {data.subscribers_count}</strong>{" "}
<strong>✨ {data.stargazers_count}</strong>{" "}
<strong>🍴 {data.forks_count}</strong>
<div>{isFetching ? "Updating..." : ""}</div>
<ReactQueryDevtools initialIsOpen />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
@Surojitgiri
Copy link

nice work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment