So let's start using stitch.
Here we actually have a pretty helpful snippet that shows us how we can use stitch in our client side
code
but of course we'll walk through that step by step together. Now to get started,
let's dive into the source folder in our code and there in the app.js
.
file. Make sure you set isAuth to true here
so that we start in authenticated mode,
we'll change this later. Now in authenticated mode,
you'll see
I want a products page
but of course we can't load products because I deleted my entire backend and hence we get an error
but we'll fix this.
Now we know that there actually are products in our database because we created them in the last module
and even if you didn't,
no worries,
we'll also add the code to add new products in this module.
So how can we now fetch products with the help of stitch?
Well first of all, we need to import stitch in the file where I want to use it,
now where do I want to use stitch?
Well for now let's go to the products page here in the pages folder, product products.js,
that is where I have my fetch data method where I try to fetch data from my own API in the last
lecture.
Now this will now not work anymore,
now I want to use stitch here. To use stitch,
I'll go all the way to the top because first of all, I need to import some things. So I'll import some things
from the mongodb stitch browser sdk package,
so this is the name of the package
and from there, I'll import stitch itself.
This is an object that allows us to basically initialize everything and then work with stitch
and I will also need to do some other things but these things like for example authenticating will not
happen in here
but in the app.js file. In the app.js file, there I'll also import stitch, by the way you can remove
the axis import, we'll not use that anymore.
You can import stitch here and the first thing I'll do with stitch is actually in my app here, I'll add
a constructor, that is a default function that will be executed first by Javascript,
so this is not related to stitch, this is pure javascript and I'll use stitch here and on stitch,
I can call initialize default app client and now here I need to pass a client app ID.
Now that client app ID is something I get from my stitch page and
actually here, I already see exactly my ID. So we can use that ID here and copy it over and pass it as
a string,
this is the first thing you need to do with any application that uses stitch, you need to initialize
stitch with this command.
Now with stitch initialized, you can now start using it and we can start using it in the products.js
file where I also import stitch,
for example when we try to fetch data which is actually the first thing we do when this component mounts,
so when this component is loaded.
So here instead of using axis, I can simply use stitch and then get app client, we initialize it in app.js,
here we can get the initialized app client and then you get a service client.
Now what is a service client?
That would be something like AWS S3 if you want to reach out to some functionalities exposed
by that
but another service client is also mongodb, so the database. And to use that service client, you need to
import something else from the mongodb stitch browser sdk and that is the remote mongo client.
So it's basically a mongo client built for usage in the browser,
we're taking that different way of authentication and so on into account. You pass it here to get service
client, you pass remotemongoclient.factory, that is essentially just a reference to a method that
will be used internally by stitch to initialize that mongo client.
Then you pass a second argument and that is the service name, the service name
here in our case is mongodb-atlas
and you must get that right,
so this is not up to you,
it has to be named like this, mongodb-atlas.
This is something we can now use because this gives us access to mongodb,
so I'll store the result of this operation in a constant named mongodb.
And we can now use mongodb so this constant here to work with our database,
so here I can now access a database, I can call a database function to which I pass the name of
the database and here, the name of my database will be shop,
that is the database I created in the last course module,
if it doesn't exist yet, it will be created on the fly
and then I access a collection in there and that will be the products collection.
And now you can call the normal crud methods you know, find, insert one, update one, delete one, delete many
and so on.
So here I will now call find to find all products without arguments
and now we have a cursor again but we get a bit of a more, a simpler to use option here
and we can now simply use as array and let stitch do the fast step by step fetching for us, if we needed
more control,
we could get access to the iterator which basically allows us to write our own loop then.
So here I'll use as array to get access to the results as an array
and we execute that function and we get back a promise here,
hence we again have then and catch here. So now in then, we should be getting our products and in catch
we'll have an error.
Now if we have an error, well then I'll just copy my error handling code from up here,
this will essentially just throw an error message where I can say fetching the product failed
and we can also log the error so that we can see it, what exactly went wrong.
And here if I do have the products, well then I of course want to set my products here equal to the products
I fetched,
so I can use this set state and this is now react code, not stitch code
and I can set products equal to the product I get here,
so this is the product in my state, that's a react thing, that the right side of the colon that are the
products I fetched.
Ok
so this is the logic that allows me to fetch data,
now I also need to go back to app.js real quick.
I deleted
the axios import and therefore all the places where I use axios would now throw errors.
So what I'll do for now is I will simply take that entire code here in the auth handler and comment it
out because it would lead to issues.
If you now save everything,
I got an error here, that I must call super.
If you do add a constructor as I did here, you have to call super in there,
so let's do that.
Now I have another issue here and that issue is that
I failed to get my service client here,
the issue is here in fetch data,
get app client is the issue here, I should access stitch.default app client,
sorry this property, you should access this property not get app client, a little mistake on my side.
And now we get an error but this error is expected, we must authenticate first and that is related to what
I explained on the slides.
You have to have authenticated users in your application because each user then receives a set of things
this user may do
and then only that interaction may happen with the database
and this is then your way of protecting your database against unwanted access because you probably are
fine with users creating products, that is what they would do through your app anyways,
you just want to make sure they can't start deleting
let's say your orders and you can control that, a logged in user may create products but not delete
orders,
so these are things you can all control.
So now we need to authenticate,
let's do that in the next lecture.