In this lecture, we are going to create a query for our database to retrieve a list of clips.
It's going to be similar to the code we wrote for the Manage page.
The main difference is that we're not going to grab clips from specific users are going to grab portions
of the collection.
Let's create a function for performing this query in your editor.
Open the clips service file.
The logic for the query will be outsourced to a service.
The service has access to the collection.
We don't have to repeat the initial steps.
We can immediately start creating a query at the bottom of the class to find a public function called
get clips.
This function should have the async keyword.
Queries are asynchronous operations for readability.
We should use async await syntax inside this function, find a variable called query.
Its value will be the this eclipse collection ref property.
The Rev Property is a reference to the collection references to our methods for performing queries.
We're not going to outright query the collection documents in the eclipse collection store, the time
stamp of an upload.
The home page should display the latest uploads before we initiate a query.
We should modify the query to sort the order by the time stamp after the property change function called
order by.
The order by function was sought documents by a specific field, as I mentioned before, we should order
clips from newest to oldest.
Let's sort the time stamp field in descending order.
Afterward, let's Cheney function called limits.
The limited function allows us to set a limit on the number of documents retrieved by the query by default,
Firebase will grab all documents.
We should impose a limit on the resources returned by Firebase.
Feel free to use whatever number you like for our app.
I think six works fine.
This query will tell Firebase to retrieve the first six results from the database.
There are additional adjustments we'll need to make.
Our next objective is to grab the next batch of results.
Let's take a moment to think about this.
If this function is called for the first time, we don't need to modify our query.
It'll always grab the first six results on subsequent requests.
The query needs to be modified, answered so far, raised not to return the same six results and said
We want the next batch.
Luckily, Firebase has a function for skipping results.
We can get the next batch by telling Firebase about the last document we requested by telling it about
the last document.
It'll start searching for more documents starting from the last document.
Let's write the code to get a better idea of how this solution would work.
First, we should store the clips performed by our query at the top of the class to find a property
called Page Clips with an initial value of an empty array.
The type for this property should be annotated with the I clip model.
By storing the clips, we can grab the last document in the array.
This information can be provided to Firebase to prevent it from querying the same document.
Let's go back to our function after the query d structure, the length property from the Page Cliff's
property.
Not a necessary step, but I recommend restructuring this property are going to be using it a couple
of times in our function.
Next, let's create a conditional statement to check if the Page Clips Array has items by checking the
length property.
We don't want to modify the query unless we've already performed a query.
Keep in mind, we're trying to skip the first set of results after the initial query.
Checking the length as a good way of testing for a previous set of results.
Next, let's modify the query inside the conditional block.
Create a variable called last document ID.
Its value will be the following clips page length minus one Dot's Document ID.
Firebase wants a document snapshot, not the ID.
We're grabbing the aid so that we can perform a query for an individual document after the variable
create another variable called last document.
Its value will be the following await this eclipse collection dot doc last Doc ID Dot get dot to promise.
Let's break down the query.
We can grab a specific document with the document function.
It has one argument, which is the ID of the document.
Lastly, we are initiating the query with the get function.
However, this function will return and observable under normal circumstances.
Firebase returns a promise.
We're working with a modified version of the package built for angular, so get around from working
with an observable.
We can change the two promised function to convert an observable into a promise.
This function is available on all observables.
We are switching to promises for simplicity.
The value returned by the function will be a document snapshot.
We can finally modify the query.
Update the query variable by setting it to the query Typekit start after a function with the snapshot
passed in.
We're telling Firebase, you start looking for documents after a specific document.
You can imagine it like telling JavaScript to return items in an array after a specific index.
These start after a function has one argument.
It's a document it should start at.
Let me break down what's happening.
The start after function requires we pass in a snapshot of the document it should start from.
We don't have the snapshot, so we're performing a query for it by calling the document function.
We're passing in the ID of the last object in the page clips array.
The query we've written should return a snapshot of the last document in the array.
We're initiating the query with the get function.
There is one caveat with using this function, we're required to set the order.
Firebase will automatically sort the documents in random order.
These start after function doesn't like that.
It wants us to order the documents before retrieving the results.
Luckily, we've already changed the order by function at the beginning of the query.
I want to mention this behavior in case you run into it in future applications.
This query will return the following six clips in the database.
It'll always start the search.
After the last set of documents, we're almost finished.
There's one last possible scenario we need to consider.
It's possible the user may trigger the request multiple times while a previous request is still pending.
If we don't account for this scenario, it could lead to inconsistent results.
We can fix this problem by keeping track of requests at the top of the class.
Create a property called pending requests with an initial value of false.
Let's go back to the get clips function at the top of the function will create a conditional statement
to check if this property is set to true.
If it is, we'll return the function.
If this property is set to true will stop further requests for money.
We'll need to toggle this property in our function after the conditional statement.
We'll update this property to True.
The final step is to initiate the request.
We've simply built the query, Firebase will not begin searching for clips until we send the request
create a variable called snapshot.
Its value will be the query dot get function with the await keyword.
The get function returns, a promise that resolves to an object called snapshot snapshots containing
information on the response by the database.
This response includes document data error component isn't interested in the entire response.
We should trim the response to the document data.
We are going to post the document data from our query into the page documents erase snapshots or arrays
so we can loop through them with the for each method.
In the callback function, we're going to reference each item in the array with an alias of document.
Lastly, we can push your documents data by calling the data function on an individual document.
Let's push this data into the documents array with a spread operator.
We should grab the ID to create a property called Document ID.
Its value will be the Document ID property.
I want to take a moment to highlight the data pushed into our array, the queries being performed on
the eclipse collection.
When we defined this property, we annotated it with the angular Firestorm Collection type.
The eclipse generic was added to this type.
As a result, we can safely push our document data into the documents array.
TypeScript is aware of the type of data returned by the query.
By planning ahead, we're able to query our database without having to repeat our annotations.
I just wanted to point this out.
Types provide reliability.
Our function is ready.
We can begin displaying our data on the home page in the next lecture.
We're going to start injecting this service into the eclipse list component.