react query, useQuery always return undefined
Answered
Pteromalid wasp posted this in #help-forum
Pteromalid waspOP
I am now working with nextjs and react query. I have the following structured -
I want to know why the useQuery always get the undefined. How can we address this?
"use client"
ClientComponent () {
const {data} = useQuery({
queryFn: async () => {
return await fetchMyData() // Always be null
}
})
}
serverAction.ts
"use server"
export default function fetchMyData() {
const session = (await getServerSession(authOptions)) as Session
const token = decrypt(session.id_token)
const res = await fetch('myapi', {header: {
Authorization: `Bearer ${token}`
}})
const json = await res.json()
console.log(json) // It is not undefined and with correct data
return json
}I want to know why the useQuery always get the undefined. How can we address this?
Answered by B33fb0n3
yea, the SEO thing is a good advantage from that. Also faster loading, because the initial data is already there with the page content. Of course can also use the isFetching variable to keep track of the current loading state and maybe even display a loading state. Some people say that there are layout shifts when displaying different stuff (when not fetching initial data via SSR) and others say not. So it's relly depending on how you want to handle it
18 Replies
Pteromalid waspOP
I suspect that the key issue is the await getServerSession
@Pteromalid wasp I am now working with nextjs and react query. I have the following structured -
"use client"
ClientComponent () {
const {data} = useQuery({
queryFn: async () => {
return await fetchMyData() // Always be null
}
})
}
serverAction.ts
"use server"
export default function fetchMyData() {
const session = (await getServerSession(authOptions)) as Session
const token = decrypt(session.id_token)
const res = await fetch('myapi', {header: {
Authorization: `Bearer ${token}`
}})
const json = await res.json()
console.log(json) // It is not undefined and with correct data
return json
}
I want to know why the useQuery always get the undefined. How can we address this?
why don't you request your external api directly from your client?
Your client know his own session data (so also the id_token) and can easily make requests
Your client know his own session data (so also the id_token) and can easily make requests
Pteromalid waspOP
coz i want to fetch the data from the server side and do data conversion also on the server side
lets say the backend for some reason return me the password of the user when fetching the userInfo, then i could prevent the password expose to the client when doing conversion on client side
@Pteromalid wasp lets say the backend for some reason return me the password of the user when fetching the userInfo, then i could prevent the password expose to the client when doing conversion on client side
yes, and your client can still access the data even if you have a server actions between the request. Why? Because the client can directly call the api (with his token) and still get the data
Pteromalid waspOP
ok, so lets say i have two client table to show some statistic. Those tables are on the same page. There is a drop down to change the time then data will be refetched according to the time. You think we should use pure client side data fetching?
@Pteromalid wasp ok, so lets say i have two client table to show some statistic. Those tables are on the same page. There is a drop down to change the time then data will be refetched according to the time. You think we should use pure client side data fetching?
Whenever I fetch stuff clientside, I would use a clientside fetching library like swr or react query. Like that I have control over the data. I wouldn't do it with plain data fetching
Pteromalid waspOP
so in the above case, you would consider to use clientside for data fetching or server side?
coz im pretty confused with nextjs. I know if the site is very static, we could use nextjs. But the situation i mentioned is slightly not that static, but the using nextjs ssr here seems to be pretty hard
I would use both: fetch initial data serverside and pass down via props and revalidate with new filter when the client changes something
Pteromalid waspOP
what would be the advantage if we fetch initial data with serverside? Lets not consider the SEO first.
I can only think of the advantage of pre redering. But isnt the react query has a isFetching that could do the same thing?
I can only think of the advantage of pre redering. But isnt the react query has a isFetching that could do the same thing?
@Pteromalid wasp what would be the advantage if we fetch initial data with serverside? Lets not consider the SEO first.
I can only think of the advantage of pre redering. But isnt the react query has a isFetching that could do the same thing?
yea, the SEO thing is a good advantage from that. Also faster loading, because the initial data is already there with the page content. Of course can also use the isFetching variable to keep track of the current loading state and maybe even display a loading state. Some people say that there are layout shifts when displaying different stuff (when not fetching initial data via SSR) and others say not. So it's relly depending on how you want to handle it
Answer
Pteromalid waspOP
Hmmm... it seems to me that if we are not doing seo stuff, we shouldnt use nextjs
unless the website is purely static...
@Pteromalid wasp Hmmm... it seems to me that if we are not doing seo stuff, we shouldnt use nextjs
nextjs isn't just for static websites. Nextjs is a fullstack Environment. Not just a cache layer for static stuff
@Pteromalid wasp solved?
Pteromalid waspOP
yes, solved
if that's not the correct message that provides the most accurate solution, feel free to mark a different one