How to fetch data from firestore in react js
How to get data in Cloud Firestore with React | Part 8 ReactJS Tutorial Series with Full App
Timecodes:
all right so in this video we're going
to continue off of the previous video
where
i have an eight answers page for
retrieving all of my
firebase firestore data so first i do
const
loading set loading is equal to use
state and the default value
is true and then i add in
another state variable const
posts comma set posts is equal to
use state which is a default value of an
empty array
and then i'm going to add in my use
effect hook
which is only going to run once
when i load my answers component which
in this case is a page
so i do uh const get posts
from firebase is equal to an empty array
and then i
do i define a new function const
subscriber is equal to
db dot collection and then the
name of the collection which in this
case
is survey responses and then i do
um on snapshot which is a
firebase function and on snapshot
has a callback function within it um
where the first parameter is something
called query snapshot
and that is actually where the api call
is happening so query snapshot
is the firebase data this is where
you're going to pull your database
information from so querysnapshot.for
each
doc i want to push
to this local variable called get post
from firebase so i push
a new object using the spread operator
of doc dot data comma key
doc dot id and we're going to use this
key
later for rendering the data
so here i put a really scary disturbing
bug emoji because this is a bug warning
this line set posts get post
from firebase and set loading false it
is
buggy code um i won't spoil it for you
but
if you want to know the answer of why
this is wrong
you can skip ahead but the answer is
coming real soon anyway
so then i'm going to return an anonymous
function where i call
the function that we just typed out
subscriber the reason i do this is
because
use effect has a return value
of a cleanup function now you may be
thinking like
subscriber is a cleanup function and the
answer is yes
actually firebase uh does this for us
so db.collection.on snapshot is
a cleanup function um i feel like this
is one of the most confusing parts
of the use effect hook is like what is a
cleanup function what is that supposed
to do
um if you want you can look up the full
details and documentation i won't go
over all of it in this video
but in regards to firebase you can trust
me that the subscriber function is a
cleanup function
and the return value has to be just like
this otherwise you'll get a warning in
the console
moving on so the second argument for the
use effect hook
is the dependencies array in this case i
leave the dependencies array empty i
only want to load it once
and then that's it next up for when we
are loading data
i'm going to say if it's loading then i
want to return a header one
hey i'm loading the page right now i'm
getting stuff from firebase
i'm not ready to display anything yet
else
when the data is ready then we're going
to return
or this little component where i do
curly brackets
post.length is greater than 0. so if
there are more than zero posts
then i want to map over posts so i do
post.map
and then post and then for each post i'm
going to
have a div with a key if you remember if
you recall earlier
uh the doctor id so and then i
uh put inside the div post dot answer
and um if
i do not have more than zero posts then
i'm just going to display a header one
that says
there's no post yet so that i don't map
over
an empty array it's at this point that i
realized i did not
wrap post dot answer and curly braces
so once i do that then i will be able to
pull
my data from firebase
this is what my schema looks like so for
each document i have answer
within there okay here's the answer to
the bug
so i realized that i put
set posts and set loading inside before
each loop so it would
run once and then it would set posts to
one element and then it would display
but that is incorrect we only want to
set posts once we're done
going over all of the documents so that
is
um the bug in this code i left it in
because if i did it
probably someone else is going to do it
too if they're watching this video
so be careful about that make sure that
um subpost
is outside of the for each loop because
you only want to set posts after you
have all your data
yeah so that's basically how to pull
your firestore data uh in a nutshell
um this is again what my schema looks
like so for each document i have
answer within there and a lot of
advanced stuff in this tutorial so
if you know you're all a little lost
um i don't blame you i went over a lot
of concepts
super briefly uh but you know you're
welcome to
ask any questions anytime um hopefully
this
this should just work if you're in a
pinch you really need to just get your
data from firestore firebase and you
know
you kind of know react you know what
you're doing but if you're a total
beginner
you know feel free to take it slow and
really go through each line and
understand what's going on
anyway yeah thanks for watching
Related queries:
how to get data from firestore in react native
reactjs fetch example
react fetch data example
react hooks fetch example
react hooks fetch data from api
