GraphQL Tutorial #27 - Rendering Data in a Component

Key Takeaways

alright then so in the last tutorial we saw the props of the component output twice to the console over here right let me just zoom in so we can see and we saw that the second time around the books were attached to this data property inside the props so what happens with react is that when some kind of data or the props or something to do with the component updates then react re-renders the component right so then we can match the component with the data so when we receive the data here the books on the props we can use that data to out pull it to the screen over here so why don't we renders the books are gonna be listed here makes sense okay cool so that's what we're gonna do in this video so let's head over to the code I'm inside the book list component here and what I'd like to do is first of all get rid of this consultant log inside the render function I'd like to create another function which is going to control the output of the book data to the screen in the component alright so let's create that function right here we'll call the function display books that makes sense alright so inside this function what do we want to do well first of all let's create a variable called data and set that equal to this dot props dot data right remember when we output this to the console it's all attached to a data property on the props that's what graph QL does it attaches it to the data property right here all right notice also that the first time around this loading property right here is true that means that the query is still loading in the background it's not returned to us yet we don't have that data yet whereas down here the second time it's logged out loading is false so obviously we have data at that point it's no longer loading and we do right here we have the array of books so what we could do is use this property loading to check if the data is actually ready for us yet right and if it is ready then we'll output the books if it's not ready then we'll output something else like loading books or something like that so let's head to the code again and here let's do that little check will say if data loading remember that's the loading property so if this dot product that is true then what do we want to do well we can output the books yet so let's just output something else like a loading books so we'll return something here and it's just gonna be a div tag and this div tag is going to say something like loading books like so all right let's close that div tag so that's what we're gonna do in this case now then if this is false then we're going to run the else statement and that means if loading is false that we have the data right so now what we can do is take that data take the books and we can map them to some hasty ml and output them so what we'll do in this case is return again and we'll return data dots books because now we have access to the books property on the data remember data dot books here so that is an array so therefore we can map that array to some HTML so what map does is go through that array and give us access to the individual item each time around which I'm going to call bulk so this is going to be an error function so we're taking that book of firing a function each time around okay and each time around each iteration through that array for each item will return some HTML so return and then in parentheses we'll do an li tag and inside the Li tag we'll do book dot name all right so let's spell it correctly book name let me just explain this briefly again once I'm done here if loading is true then we're just gonna show this loading books in loading is false we'll fire this and we're returning data box map which is cycling through that array and each iteration through when it lands on each item in the array we're taking that book and we're using it inside this es6 function right here which each time around is returning some HTML and it's taking that that book and grabbing the name property off it and placing it inside the LI tag right here remember the curly braces is how we output data dynamically in react now let's give this a whirl there's something missing but I'm going to come back to that in a second in fact what we need to do is call this function otherwise nothing will happen so down here instead of this Li what we need to do is open our curly braces and inside the curly braces call the function so we say this dots display books all right so this refers to the component then dot display books which is the method inside this component it's going to run this and either show us this or this stuff so let's save it and find out what happens let's go to the browser and you can see right here that we have all of the books on the screen now if we refresh this if you're really quick you might see the loading bit at the start so refresh loading books very quickly it goes once the query comes back with the data and then we have this stuff output to the browser that is awesome now I said there was one thing left to do and it's because we have this error right here which basically says each child in an array or iterator should have a unique key prop so if we go to the code right here it's saying that each one of these Li tags the way I'll put in has to have some kind of key some kind of identifier for each Li tag so react knows exactly what it is if you like all right so we can say that the key is going to be equal to the book dots ID right and that's going to be unique for each different Li type because in the query up here we say we want the name of each book and the ID of each book so I'll put in a name within the Li tag and the ID of the book as the key and that will be different for each different Li tag that we iterate through so let's save this and make sure that the the error goes away if we refresh we can see loading then this flash is off and the error is gone so awesome well done that is how we can bind our query with the component and then have access to all of the data that comes back from that query and output it to the screen so we're getting closer and closer to the final product here we're starting to interact with our graph you are server and in the next tutorial what we're going to do is start to create different components to add data to this list so I'll see you in that next tutorial