I would like to fetch Cloudfirestore on the client side with useSWR, but I didn't know how to write the API specification, so I asked you a question.
This is because I am currently using NextJS to create a Todo app, and I would like to bring the data with SWR.
SWR describes it as follows:
const {data:tasks, mutate} = useSWR((API for my project),
fetch,
{
fallbackData:statictasks,
}
)
I have looked into many things, but even if I write like the article below in this project specification, it will be http://localhost:3000/firestore/posts in the local environment, and naturally I get an error if I don't have such URL.
Avoid explosion with SWR.firebase Cloud Firestore and Next.js
const {data:posts} = useSWR('firestore/posts', fetchPosts);
The Firestore formula states that it can be retrieved with a description such as https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA, but the return value is returned as {documents:[]}, which is not a bad return value.
https://firebase.google.com/docs/firestore/use-rest-api
We also found SWR library for Firestore, but this does not allow fallbackstate initialization unlike the official SWR, and we cannot assign values obtained by SSG as initial values.
Could someone please teach me?
reactjs firebase next.js
I understand that the type returned by restAPI is different, so I will make it the type I want.
Why don't you make a custom hook with useSWR wrapped around it?
export const usePosts=()=>{
const {posts} = useSWR ('firestore/posts', fetchPosts);
US>return{
posts —posts.documents
};
};
© 2024 OneMinuteCode. All rights reserved.