1 00:00:00,090 --> 00:00:05,700 In this lecture, we are going to create a query for our database to retrieve a list of clips. 2 00:00:06,000 --> 00:00:09,600 It's going to be similar to the code we wrote for the Manage page. 3 00:00:09,930 --> 00:00:16,050 The main difference is that we're not going to grab clips from specific users are going to grab portions 4 00:00:16,050 --> 00:00:16,920 of the collection. 5 00:00:17,280 --> 00:00:21,150 Let's create a function for performing this query in your editor. 6 00:00:21,210 --> 00:00:23,220 Open the clips service file. 7 00:00:25,700 --> 00:00:29,060 The logic for the query will be outsourced to a service. 8 00:00:29,330 --> 00:00:31,640 The service has access to the collection. 9 00:00:31,880 --> 00:00:34,160 We don't have to repeat the initial steps. 10 00:00:34,340 --> 00:00:40,340 We can immediately start creating a query at the bottom of the class to find a public function called 11 00:00:40,340 --> 00:00:41,210 get clips. 12 00:00:43,660 --> 00:00:46,270 This function should have the async keyword. 13 00:00:48,730 --> 00:00:52,360 Queries are asynchronous operations for readability. 14 00:00:52,420 --> 00:00:58,540 We should use async await syntax inside this function, find a variable called query. 15 00:00:58,840 --> 00:01:03,760 Its value will be the this eclipse collection ref property. 16 00:01:06,260 --> 00:01:12,230 The Rev Property is a reference to the collection references to our methods for performing queries. 17 00:01:12,500 --> 00:01:18,110 We're not going to outright query the collection documents in the eclipse collection store, the time 18 00:01:18,110 --> 00:01:19,280 stamp of an upload. 19 00:01:19,580 --> 00:01:24,770 The home page should display the latest uploads before we initiate a query. 20 00:01:24,920 --> 00:01:31,970 We should modify the query to sort the order by the time stamp after the property change function called 21 00:01:31,970 --> 00:01:32,720 order by. 22 00:01:35,400 --> 00:01:41,700 The order by function was sought documents by a specific field, as I mentioned before, we should order 23 00:01:41,700 --> 00:01:43,500 clips from newest to oldest. 24 00:01:43,770 --> 00:01:47,100 Let's sort the time stamp field in descending order. 25 00:01:49,560 --> 00:01:52,590 Afterward, let's Cheney function called limits. 26 00:01:54,990 --> 00:02:01,530 The limited function allows us to set a limit on the number of documents retrieved by the query by default, 27 00:02:01,740 --> 00:02:04,050 Firebase will grab all documents. 28 00:02:04,260 --> 00:02:08,130 We should impose a limit on the resources returned by Firebase. 29 00:02:08,460 --> 00:02:11,940 Feel free to use whatever number you like for our app. 30 00:02:12,120 --> 00:02:13,860 I think six works fine. 31 00:02:16,520 --> 00:02:21,230 This query will tell Firebase to retrieve the first six results from the database. 32 00:02:21,650 --> 00:02:24,140 There are additional adjustments we'll need to make. 33 00:02:24,500 --> 00:02:28,220 Our next objective is to grab the next batch of results. 34 00:02:28,400 --> 00:02:30,500 Let's take a moment to think about this. 35 00:02:30,740 --> 00:02:35,450 If this function is called for the first time, we don't need to modify our query. 36 00:02:35,690 --> 00:02:39,990 It'll always grab the first six results on subsequent requests. 37 00:02:40,040 --> 00:02:46,100 The query needs to be modified, answered so far, raised not to return the same six results and said 38 00:02:46,280 --> 00:02:47,600 We want the next batch. 39 00:02:47,870 --> 00:02:51,050 Luckily, Firebase has a function for skipping results. 40 00:02:51,290 --> 00:02:57,260 We can get the next batch by telling Firebase about the last document we requested by telling it about 41 00:02:57,260 --> 00:02:58,340 the last document. 42 00:02:58,550 --> 00:03:02,300 It'll start searching for more documents starting from the last document. 43 00:03:02,870 --> 00:03:06,710 Let's write the code to get a better idea of how this solution would work. 44 00:03:07,070 --> 00:03:13,040 First, we should store the clips performed by our query at the top of the class to find a property 45 00:03:13,040 --> 00:03:16,820 called Page Clips with an initial value of an empty array. 46 00:03:19,520 --> 00:03:23,420 The type for this property should be annotated with the I clip model. 47 00:03:25,960 --> 00:03:29,890 By storing the clips, we can grab the last document in the array. 48 00:03:30,280 --> 00:03:35,470 This information can be provided to Firebase to prevent it from querying the same document. 49 00:03:35,800 --> 00:03:42,730 Let's go back to our function after the query d structure, the length property from the Page Cliff's 50 00:03:42,730 --> 00:03:43,420 property. 51 00:03:45,970 --> 00:03:52,090 Not a necessary step, but I recommend restructuring this property are going to be using it a couple 52 00:03:52,090 --> 00:03:53,350 of times in our function. 53 00:03:53,650 --> 00:04:00,160 Next, let's create a conditional statement to check if the Page Clips Array has items by checking the 54 00:04:00,160 --> 00:04:01,150 length property. 55 00:04:03,840 --> 00:04:07,560 We don't want to modify the query unless we've already performed a query. 56 00:04:07,950 --> 00:04:12,700 Keep in mind, we're trying to skip the first set of results after the initial query. 57 00:04:13,140 --> 00:04:17,339 Checking the length as a good way of testing for a previous set of results. 58 00:04:17,720 --> 00:04:21,720 Next, let's modify the query inside the conditional block. 59 00:04:21,839 --> 00:04:25,020 Create a variable called last document ID. 60 00:04:27,960 --> 00:04:34,430 Its value will be the following clips page length minus one Dot's Document ID. 61 00:04:39,080 --> 00:04:42,090 Firebase wants a document snapshot, not the ID. 62 00:04:42,800 --> 00:04:48,860 We're grabbing the aid so that we can perform a query for an individual document after the variable 63 00:04:48,950 --> 00:04:52,100 create another variable called last document. 64 00:04:54,740 --> 00:05:05,900 Its value will be the following await this eclipse collection dot doc last Doc ID Dot get dot to promise. 65 00:05:08,440 --> 00:05:09,880 Let's break down the query. 66 00:05:10,210 --> 00:05:13,360 We can grab a specific document with the document function. 67 00:05:13,690 --> 00:05:17,020 It has one argument, which is the ID of the document. 68 00:05:17,350 --> 00:05:21,220 Lastly, we are initiating the query with the get function. 69 00:05:21,730 --> 00:05:26,860 However, this function will return and observable under normal circumstances. 70 00:05:26,870 --> 00:05:28,690 Firebase returns a promise. 71 00:05:28,870 --> 00:05:34,660 We're working with a modified version of the package built for angular, so get around from working 72 00:05:34,660 --> 00:05:35,620 with an observable. 73 00:05:35,800 --> 00:05:40,570 We can change the two promised function to convert an observable into a promise. 74 00:05:40,930 --> 00:05:43,810 This function is available on all observables. 75 00:05:44,230 --> 00:05:46,840 We are switching to promises for simplicity. 76 00:05:47,350 --> 00:05:51,020 The value returned by the function will be a document snapshot. 77 00:05:51,280 --> 00:05:53,230 We can finally modify the query. 78 00:05:53,590 --> 00:05:59,980 Update the query variable by setting it to the query Typekit start after a function with the snapshot 79 00:05:59,980 --> 00:06:00,700 passed in. 80 00:06:03,390 --> 00:06:07,980 We're telling Firebase, you start looking for documents after a specific document. 81 00:06:08,580 --> 00:06:14,340 You can imagine it like telling JavaScript to return items in an array after a specific index. 82 00:06:14,640 --> 00:06:17,340 These start after a function has one argument. 83 00:06:17,580 --> 00:06:19,680 It's a document it should start at. 84 00:06:20,220 --> 00:06:21,900 Let me break down what's happening. 85 00:06:22,170 --> 00:06:27,630 The start after function requires we pass in a snapshot of the document it should start from. 86 00:06:28,020 --> 00:06:33,840 We don't have the snapshot, so we're performing a query for it by calling the document function. 87 00:06:34,140 --> 00:06:38,400 We're passing in the ID of the last object in the page clips array. 88 00:06:38,760 --> 00:06:43,350 The query we've written should return a snapshot of the last document in the array. 89 00:06:43,680 --> 00:06:46,320 We're initiating the query with the get function. 90 00:06:46,860 --> 00:06:51,330 There is one caveat with using this function, we're required to set the order. 91 00:06:51,690 --> 00:06:55,320 Firebase will automatically sort the documents in random order. 92 00:06:55,620 --> 00:06:58,230 These start after function doesn't like that. 93 00:06:58,500 --> 00:07:02,280 It wants us to order the documents before retrieving the results. 94 00:07:02,610 --> 00:07:07,320 Luckily, we've already changed the order by function at the beginning of the query. 95 00:07:07,680 --> 00:07:12,330 I want to mention this behavior in case you run into it in future applications. 96 00:07:12,900 --> 00:07:16,800 This query will return the following six clips in the database. 97 00:07:17,100 --> 00:07:18,510 It'll always start the search. 98 00:07:18,510 --> 00:07:21,900 After the last set of documents, we're almost finished. 99 00:07:22,230 --> 00:07:25,260 There's one last possible scenario we need to consider. 100 00:07:25,620 --> 00:07:31,860 It's possible the user may trigger the request multiple times while a previous request is still pending. 101 00:07:32,310 --> 00:07:36,600 If we don't account for this scenario, it could lead to inconsistent results. 102 00:07:36,900 --> 00:07:41,760 We can fix this problem by keeping track of requests at the top of the class. 103 00:07:41,970 --> 00:07:46,650 Create a property called pending requests with an initial value of false. 104 00:07:49,190 --> 00:07:55,280 Let's go back to the get clips function at the top of the function will create a conditional statement 105 00:07:55,280 --> 00:07:57,860 to check if this property is set to true. 106 00:08:00,440 --> 00:08:02,720 If it is, we'll return the function. 107 00:08:05,240 --> 00:08:09,710 If this property is set to true will stop further requests for money. 108 00:08:10,040 --> 00:08:14,780 We'll need to toggle this property in our function after the conditional statement. 109 00:08:14,840 --> 00:08:17,150 We'll update this property to True. 110 00:08:24,020 --> 00:08:26,630 The final step is to initiate the request. 111 00:08:26,960 --> 00:08:33,140 We've simply built the query, Firebase will not begin searching for clips until we send the request 112 00:08:33,470 --> 00:08:35,809 create a variable called snapshot. 113 00:08:36,169 --> 00:08:41,090 Its value will be the query dot get function with the await keyword. 114 00:08:43,900 --> 00:08:50,140 The get function returns, a promise that resolves to an object called snapshot snapshots containing 115 00:08:50,140 --> 00:08:52,630 information on the response by the database. 116 00:08:52,960 --> 00:08:58,900 This response includes document data error component isn't interested in the entire response. 117 00:08:59,260 --> 00:09:01,900 We should trim the response to the document data. 118 00:09:02,320 --> 00:09:09,280 We are going to post the document data from our query into the page documents erase snapshots or arrays 119 00:09:09,370 --> 00:09:12,220 so we can loop through them with the for each method. 120 00:09:18,750 --> 00:09:24,810 In the callback function, we're going to reference each item in the array with an alias of document. 121 00:09:27,640 --> 00:09:33,460 Lastly, we can push your documents data by calling the data function on an individual document. 122 00:09:33,790 --> 00:09:38,320 Let's push this data into the documents array with a spread operator. 123 00:09:40,630 --> 00:09:44,920 We should grab the ID to create a property called Document ID. 124 00:09:45,430 --> 00:09:48,730 Its value will be the Document ID property. 125 00:09:51,270 --> 00:09:56,940 I want to take a moment to highlight the data pushed into our array, the queries being performed on 126 00:09:56,940 --> 00:09:58,080 the eclipse collection. 127 00:09:58,380 --> 00:10:03,750 When we defined this property, we annotated it with the angular Firestorm Collection type. 128 00:10:04,140 --> 00:10:06,720 The eclipse generic was added to this type. 129 00:10:07,410 --> 00:10:12,060 As a result, we can safely push our document data into the documents array. 130 00:10:12,420 --> 00:10:16,050 TypeScript is aware of the type of data returned by the query. 131 00:10:16,380 --> 00:10:22,050 By planning ahead, we're able to query our database without having to repeat our annotations. 132 00:10:22,380 --> 00:10:24,090 I just wanted to point this out. 133 00:10:24,420 --> 00:10:26,280 Types provide reliability. 134 00:10:26,820 --> 00:10:27,990 Our function is ready. 135 00:10:28,290 --> 00:10:32,610 We can begin displaying our data on the home page in the next lecture. 136 00:10:32,760 --> 00:10:37,290 We're going to start injecting this service into the eclipse list component.