I am trying to use react-query with nextjs to prefetch query on server. It works for the initial query which gets a list of items. However when I try to fetch each item inside component it only fetches it on the client side.
export default function Home() {
const { data } = useQuery("pokemons", fetchPokemons);
return (
<>
<div>
{data.map((pokemon) => (
<Pokemon key={pokemon.name} pokemon={pokemon}/>
))}
</div>
</>
);
}
export async function getStaticProps() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery('pokemons', fetchPokemons)
const fetchedPokemons = queryClient.getQueryData()
//query each pokemon
fetchedPokemons.forEach(async (pokemon) => {
await queryClient.prefetchQuery(pokemon.name, () => fetchPokemon(pokemon.url))
});
return {
props: {
dehydratedState: dehydrate(queryClient),
},
}
}
And here is code for the component which also queries each item.
const Pokemon = ({pokemon}) => {
const {data} = useQuery(pokemon.name, () => fetchPokemon(pokemon.url))
// logs only in browser, on server it is undefined
{console.log(data)}
return (
<div>
<h3>
Name - {data.name}
</h3>
<h4>Base XP - {data.base_experience}</h4>
</div>
)
}
Can you please tell me what am I doing wrong that the query doesn't execute on server or is it an issue of the library itself?
when you use getQueryData to get data from the cache, you need to provide the key of the data you want to get:
await queryClient.prefetchQuery('pokemons', fetchPokemons)
const fetchedPokemons = queryClient.getQueryData('pokemons')
alternatively, you can use fetchQuery to also retrieve the data immediately
try {
const fetchedPokemons = await queryClient.fetchQuery('pokemons')
} catch (error) {
// handle error
}
Be aware that fetchQuery throws errors (as opposed to prefetchQuery, which does not), so you might want to handle errors somehow.
I was able to solve this by combining two of my fetching functions into one like so
const fetchPokemons = async () => {
const { data } = await axios.get(
"https://pokeapi.co/api/v2/pokemon?limit=10&offset=0"
);
const pokemonArray = await Promise.all(
data.results.map(async (pokemon) => {
const res = await axios.get(pokemon.url);
return res.data;
})
);
return pokemonArray;
};
export default function Home() {
const { data } = useQuery("pokemons", fetchPokemons);
return (
<>
<div>
{data.map((pokemon) => (
<Pokemon key={pokemon.name} pokemon={pokemon}/>
))}
</div>
</>
);
}
export async function getStaticProps() {
const queryClient = new QueryClient();
await queryClient.prefetchQuery("pokemons", fetchPokemons);
return {
props: {
dehydratedState: dehydrate(queryClient),
},
};
}
Related
I'm trying to build a search bar in my new project, and I seem to be doing some things(maybe a lot) wrong.
I set the book state to null and the useQuery hook seems to be using it to search for books.
I don't want it to search for anything unless I click the button.
These are my codes:
fetchBooks.jsx
async function fetchBooks({ queryKey }) {
const book = queryKey[1];
const response = await fetch(
`https://www.googleapis.com/books/v1/volumes?q=${book}`
);
if (!response.ok) {
throw new Error(`Search not found for ${book}`);
}
return response.json();
}
export default fetchBooks;
Here is the main component.
import { useState } from "react";
import { useQuery } from "#tanstack/react-query";
import fetchBooks from "../helper/fetchBooks";
const Home = () => {
const [book, setBook] = useState(null);
const results = useQuery(["search", book], fetchBooks);
const handleSubmit = (e) => {
e.preventDefault();
setBook(e.target.elements.book.value);
};
return (
<>
<form onSubmit={handleSubmit}>
<label htmlFor="book">
Book Name:
<input type="text" name="book" />
</label>
<button type="submit">Submit</button>
</form>
{results.isLoading ? (
<div>Loading...</div>
) : results.isError ? (
<div>{results.error.message}</div>
) : (
<div>
<h2>Results</h2>
<ul>
{results.data.items.map((item) => {
return (
<div key={item.id}>
<h3>{item.volumeInfo.title}</h3>
<p>{item.volumeInfo.authors}</p>
</div>
);
})}
</ul>
</div>
)}
</>
);
};
export default Home;
You can return a default value in the fetch function if the book is null. Then, the query won't actually request the API.
async function fetchBooks({ queryKey }) {
const book = queryKey[1];
if(!book) return { items: [] }
const response = await fetch(
`https://www.googleapis.com/books/v1/volumes?q=${book}`
);
if (!response.ok) {
throw new Error(`Search not found for ${book}`);
}
return response.json();
}
export default fetchBooks;
Instead of restricting the useQuery to call the fecthBooks functions, you can modify the fetchBooks functions to return an empty array if book is set to null. The fetchBooks can be modified as below:-
async function fetchBooks({ queryKey }) {
const book = queryKey[1];
if(!book){
return {
isLoading : false,
error : null,
data : null
}
}
const response = await fetch(
`https://www.googleapis.com/books/v1/volumes?q=${book}`
);
if (!response.ok) {
throw new Error(`Search not found for ${book}`);
}
return response.json();
}
export default fetchBooks;
The idiomatic way would be to set the useQuery itself to disabled (via the enabled property) when your params aren't ready:
const results = useQuery({
queryKey: ["search", book],
queryFn: fetchBooks
enabled: !!books
})
this will prevent the query function from executing when you have no books.
I'm trying to render a page with two props from different API fetches.
The adress bar looks like this: http://localhost:3000/startpage?id=1
And the code looks like this, with the first API fetch:
import { useRouter } from "next/router";
export const getServerSideProps = async (context) => {
const { id } = context.query;
const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
const data = await res.json();
// console.log(data);
return {
props: { user: data },
};
};
Second API fetch looks like this
export const getServerSideProps2 = async (context) => {
const { id } = context.query;
const res = await fetch(`${process.env.BACKEND_URL}/User/${id}/favorites`);
const data = await res.json();
//console.log(data);
return {
props: { favorites: data },
};
};
And the page that I am trying to render then looks like this:
function StartPage( {user, favorites} ){
return (
<div>
<div className={styles.formGroup}>
<h1>Welcome {user.name}</h1>
</div>
<div>
<h1>These are your favorite movies:</h1>
{favorites.map(favorite => (
<div key={favorite.id}>
<h5>favorite.name</h5>
</div>
))}
</div>
</div>
)
}
I'm guessing that there's a way to put both API fetches in the same function. But I don't know how to. If anyone has any suggetions on how to do that I'd be happy to listen.
Thank you in advance.
You can make the calls in the same method and pass both data:
export const getServerSideProps = async (context) => {
const { id } = context.query;
const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
const data = await res.json();
const resFav = await fetch(`${process.env.BACKEND_URL}/User/${id}/favorites`);
const dataFav = await resFav.json();
return {
props: { user: data, favorites: dataFav },
};
};
No need to declare getServerSideProps2
I make Next JS project and I am new to coding in this program and have a "Service" folder. In this folder there are index.js and [id].js (details page). All data come from Next API. Index.js works, there is no problem. But when I click the details element the error is seen. I don't know what is my mistake
Error: Error serializing `.data` returned from `getServerSideProps` in "/services/[id]". Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.
index.js
<section className="services-main">
<div className="services-main-context container">
<MainPageServices posts={posts} />
</div>
</section>
....
export async function getStaticProps() {
const res = await fetch("http://localhost:3000/api/servicesApi/");
const posts = await res.json();
return {
props: {
posts,
},
};
}
MainPageServices component
<div className="main-page-services-cards">
{posts.map((card, key) => (
<div key={card.id} className="service-card">
<Link href={`/services/${card.id}`}>
<a>
<div className="card-img">
<Image src={card.img} alt="Services" />
</div>
</a>
</Link>
</div>
))}
</div>
Not working component (Details)
const ServiceDetails = ({ data }) => {
console.log(data);
return (
<h1>{data.header}</h1>)
);
};
export const getServerSideProps = async (context) => {
const res = await fetch(`http://localhost:3000/api/servicesApi/${context.params.id}`);
const data = res.json();
return {
props: {
data,
},
};
};
My details page API
import { servicesData } from "../../../data";
export default function handler(req, res) {
const { id } = req.query;
const service = servicesData.find((service) => service.id === parseInt(id));
res.status(200).json(service);
}
I think you need to await res.json() because your error says you are passing a promise into your props.
const ServiceDetails = ({ data }) => {
console.log(data);
return (
<h1>{data.header}</h1>)
);
};
export const getServerSideProps = async (context) => {
const res = await fetch(`http://localhost:3000/api/servicesApi/${context.params.id}`);
const data = await res.json();
return {
props: {
data,
},
};
};
I would like to be able to make both data.account and data.assets accessbile individually. The idea is to be able to insert this component into a page where I can say something like:
import UserAccounts from '...';
"This user (**data.account**) owns this number (**data.assets**) of assets".
The following is the component code:
function UserAccounts() {
const [accounts, setAccounts] = useState();
useEffect(() => {
async function fetchData() {
const res = await fetch(
'https://proton.api.atomicassets.io/atomicassets/v1/accounts?limit=10'
);
const { data } = await res.json();
setAccounts(data);
}
fetchData();
}, []);
if (!accounts) {
return (
<div>
<Spinner />
</div>
);
}
const account = accounts.map((data) => {
return <>{(data.account, data.assets)}</>;
});
return <></>;
}
export default UserAccounts;
the way that it is now, it's pulling the accounts from the api. The problem is that it's not set to return anything. I'm trying to figure out how I can decide which to return based on what I need (data.account or data.assets
I'm new to ReactJS and I'm now trying to do an interactive comments section (taken from frontendmentor.io), but the App component just doesn't show what it's supposed to show
This is my App component:
function App() {
const [data, setData] = useState([]);
useEffect(() => {
const getComm = async () => {
await fetchData();
};
getComm();
}, []);
console.log(data);
const fetchData = async () => {
const res = await fetch("db.json").then(async function (response) {
const comm = await response.json();
setData(comm);
return comm;
});
};
return (
<Fragment>
{data.length > 0 ? <Comments data={data} /> : "No Comments to Show"}
</Fragment>
);
}
export default App;
The console.log(data) logs two times:
the first time it's an empty Array;
the second time it's the Array with my datas inside.
As it follows:
If I force the App to print the Comments it just says that cannot map through an undefined variable
This is my Comments component:
function Comments({ data }) {
return (
<div>
{data.map((c) => (
<Comment key={c.id} />
))}
</div>
);
}
export default Comments;
I'm wondering why the page still displays No Comments to Show even if the log is correct
#Cristian-Irimiea Have right about response get from fetch. Response is an a object and can't be iterate. You need to store in state the comments from response
But you have multiple errors:
Take a look how use async function. Your function fetchData looks bad.
// Your function
const fetchData = async () => {
const res = await fetch("db.json").then(async function (response) {
const comm = await response.json();
setData(comm);
return comm;
});
};
// How can refactor
// fetchData function have responsibility to only fetch data and return a json
const fetchData = async () => {
const response = await fetch("./db.json");
const body = await response.json();
return body;
};
You are updating state inside fetch function but a good solution is update state then promise resolve:
useEffect(() => {
// here we use .then to get promise response and update state
fetchData().then((response) => setData(response.comments));
}, []);
The initial state of your data is an array.
After you fetch your data from the response you get an object. Changing state types is not a good practice. You should keep your data state as an array or as an object.
Considering you will keep it as an array, you need use an array inside of setData.
Ex.
comm && Array.isArray(comm.comments) && setData(comm.comments);
As for your Comments component you should consider expecting an array not an object.
Ex.
function Comments(data) {
return (
<div>
{data.map((c) => (
<Comment key={c.id} />
))}
</div>
);
}
export default Comments;