Update fetchReply

[00:00] Okay, so we need to completely change this FetchReply function. So instead of calling the OpenAI API directly from the front end, now we're going to call the Netlify serverless function. Now, I'm going to set you a challenge to update FetchReply right here in the Scrimba editor.

[00:17] But when we're done, we're going to need to paste this into VS Code and push it to GitHub to trigger a redeploy. First, we need a URL to call. And we've already seen the URL, we looked at it before, and I've got it right here in the URL bar. So I'm just going to come in here and paste it in a const called URL. And now it's time for a challenge.

[00:36] And it is quite a long challenge. And this is where I'm assuming you have some knowledge of fetch requests. But do take all of the time you need and feel free to search online if you need to. When I do this, I'm going to use async await. But you don't have to, you can use a fetch request and chain then statements if you prefer to do it that way.

[00:56] Also, I'm just going to comment these two lines of code. When we've got this working in the console, we can uncomment these and update them as needed. But we'll do that after we've got the serverless function working properly. Okay, let's check out the challenge. So I want you to make a fetch request to the URL that we've got saved here

[01:18] using the following details. The method should be post. In the headers, the content type should be text slash plain. And the body should hold conversation string, which remember, we have got stored right here. Now, once you've made the fetch request, you can save the response to a const and log it out.

[01:37] Then copy and paste the updated fetch reply function to VS Code and delete any unnecessary code from index.js. Push the changes to GitHub to trigger a redeploy. And remember, that will take some seconds, maybe as long as a minute. And then navigate to your Netlify site. Put something in the text input.

[01:56] It doesn't actually matter what, because it's not going to be rendered and it's not going to be sent to OpenAI. Hit send. And then what you should see in the console is hello world. And that will show that from the front end, we're successfully managing to access the serverless function and get whatever it returns. Okay, quite a lot to do.

[02:15] So pause now, take all of the time you need, and we'll have a look together in just a moment. Okay, so hopefully you managed to do that just fine. So I'm going to come down here and I'm going to set up a new const response. And I'm going to await a fetch request. The first thing a fetch request needs is a URL. Well, we've got that saved right here.

[02:41] And now we need to pass it an object. So we've got all of the details here. Firstly, the method should be post. And then we need some headers. And this will hold an object. And it's going to have a single key value pair. The key will be content type. And the value will be text slash plain. Lastly, it needs a body.

[03:05] And the body will hold conversation string. Okay, then I'm going to come underneath that and set up a const called data. And we will add a string to that string. And we will await the response JSON. And let's just log out data. Now we've got plenty of code here that we don't need.

[03:28] All of this code down here, we can safely delete. But I'm just going to comment it out because we will need to copy and paste it later. And likewise, right up at the top, all of this code that brings in OpenAI, we no longer need. And I will comment it out. Then I'm going to copy the fetch reply function.

[03:47] And I'm going to bring it over to VS Code. And I'm going to paste it in. And of course, I haven't copied over the code I commented out apart from these two lines, which we will be using here in the future. Now staying in VS Code, up at the top, we've got these lines of code here. We can delete them. When you've done that, you can save,

[04:06] push it to GitHub, and that will trigger a Netlify redeploy. And remember, that will take a few seconds, maybe even a couple of minutes. When it's done, navigate to our site, send a message. And then what you see in the console should be the object with hello world. And that will show you that the front-end code

[04:25] has successfully communicated with the serverless function. And that means we need to get to work on this serverless function next.