react query
1 a:---getting data
https://github.com/WebDevSimplified/react-query-crash-course-example/blob/main/client/src/App.jsx
//automatic retry system
import React from 'react'
import { useQuery,useMutation } from 'react-query'
const POSTS=[
{id:1,title:'goodmorning'},
{id:2,title:'goodafternoon'}
]
export default function Example() {
//my wait function...
const wait=(duration) =>{
return new Promise(resolve=>setTimeout(resolve,duration))
}
const Postquery=useQuery({
queryKey:["Posts"],
// queryFn:()=>wait(5000).then(()=>[...POSTS])
queryFn:()=>Promise.reject("Error message")
})
if (Postquery.isLoading) return <h1>loading....</h1>
if(Postquery.error) return <pre>{JSON.stringify(Postquery.error)}</pre>
return (
<div>
understand react querys
</div>
)
}
2
import React from 'react'
import { useQuery,useMutation } from 'react-query'
const POSTS=[
{id:1,title:'goodmorning'},
{id:2,title:'goodafternoon'}
]
export default function Example() {
//my wait function...
const wait=(duration) =>{
return new Promise(resolve=>setTimeout(resolve,duration))
}
const Postquery=useQuery({
queryKey:["Posts"],
queryFn:()=>wait(1000).then(()=>[...POSTS])
// queryFn:()=>Promise.reject("Error message")[retry facilities]
})
if (Postquery.isLoading) return <h1>loading....</h1>
if(Postquery.error) return <pre>{JSON.stringify(Postquery.error)}</pre>
return (
<div>
{Postquery.data.map(post=>(
<div key={post.id}>{post.title} </div>
))}
</div>
)
}
changing data (mutation)
3....
import React from 'react'
import { useQuery,useMutation,QueryClient } from 'react-query'
import { ReactQueryDevtools } from "react-query/devtools";
const POSTS=[
{id:1,title:'goodmorning'},
{id:2,title:'goodafternoon'}
]
export default function Example() {
const queryClient = new QueryClient()//for onsuccess needed...
console.log(POSTS);//new post...
//my wait function...
const wait=(duration) =>{
return new Promise(resolve=>setTimeout(resolve,duration))
}
const Postquery=useQuery({
queryKey:["Posts"],
queryFn:()=>wait(1000).then(()=>[...POSTS])
// queryFn:()=>Promise.reject("Error message")[retry facilities]
})
//mutation:--
const newPostMutation=useMutation({
mutationFn:(title)=>{
return wait(1000).then(()=>
POSTS.push({id:crypto.randomUUID(),title})
)
},
onSuccess: () => {
alert("data updated")
queryClient.invalidateQueries(["posts"])
},
}
)
if (Postquery.isLoading) return <h1>loading....</h1>
if(Postquery.error) return <pre>{JSON.stringify(Postquery.error)}</pre>
return (
<div>
{Postquery.data.map(post=>(
<div key={post.id}>{post.title} </div>
))}
<button disabled={newPostMutation.isLoading} onClick={()=>newPostMutation.mutate('good night')}>addnew</button>
<ReactQueryDevtools initialIsOpen />
</div>
)
}
4.
https://www.makeuseof.com/react-data-fetching-using-tanstack-query/
...main.jsx:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')).render(
<>
<QueryClientProvider client={queryClient}>
<App/>
</QueryClientProvider>
</>,
)
app.jsx:
import {useState} from 'react'
import './App.css'
import PostList1 from './Components/PostList1';
import PostList2 from './Components/PostList2';
export default function App() {
const [currentPage,setCurrentPage]=useState(<PostList2/>)
return (
<div>
<button onClick={()=>setCurrentPage(<PostList1/>)}>PostList1</button>
<button onClick={()=>setCurrentPage(<PostList2/>)}>PostList2</button>
{currentPage}
</div>
)
}
post1 and post2:
import React from 'react';
import axios from 'axios';
import { useQuery } from 'react-query';
import {getPosts} from './api/Posts';
function PostList1() {
const postQuery = useQuery({
queryKey: ['posts'],
// queryFn:getPosts
queryFn: async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
const data = await response.data;
return data;
}
})
if( postQuery.isLoading ) return ( <h1>Loading....</h1>)
if( postQuery.isError ) return (<h1>Error loading data!!!</h1>)
return (
<div>
<h1>Home</h1>
{ postQuery.data.map( (item) => ( <p key={item.id}>{item.title}</p>)) }
</div>
)
}
export default PostList1;
5....
Comments
Post a Comment