Okay, let's move on to the client and see how we can get our GraphQL information from the backend into a frontend, so in this case, a Vue app. So eventually we are going to make use of Vue Apollo, but sometimes you only need to make one or two requests to a GraphQL backend, and for that you can just make use of the tools you're already familiar with, like Fetch or Axios. So let's try to do that. So I have a Vue 3 app scaffolded up with Vite here, and before we go into the code, let's take a look at our REST client here, and let's make an endpoint for the endpoint we have here already. So it's /graphql, and it's a POST request, so let's make a new request.

have here already. So it's /graphql, and it's a POST request, so let's make a new request. Let's just call it GraphQL, and let's make it a POST request, okay? And let's paste that in, and for this, there is an option for GraphQL, but all it's doing is sending in JSON data with query as the key, and with the actual GraphQL query as the value. So let's try that out. Let's pass it in a query here, so this one right here is fine. Space that in, and let's hit send, and we do get the correct information back. Now if we look at the timeline here, you'll see it's just a POST request to /graphql,

Space that in, and let's hit send, and we do get the correct information back. Now if we look at the timeline here, you'll see it's just a POST request to /graphql, and it's passing in this JSON data as the body. So if I were to change this to JSON data, it's pretty much the same thing here. So let's see if we can recreate that using fetch in a Vue app. So let's go into our code, let's just put it right here. So I'm going to make a mounted hook here, using onMounted, and let me just import this from Vue itself. And let's say, pass it a callback, and let's make use of fetch here, like I said. So let's say fetch, and the endpoint is here, so let me just grab that again.

And let's say, pass it a callback, and let's make use of fetch here, like I said. So let's say fetch, and the endpoint is here, so let me just grab that again. Space that in, and we do have a few options here. So first it's a POST request, so let's say method is POST, and we do have to pass it the correct headers, and the headers are content, type, application, JSON. And like I said for the body, we have to pass it in valid JSON, that is our GraphQL query. So this right here. So to do that in fetch, we can say, or after the headers, we can say body, and we have to JSON.stringify the query here. So like I said, the key is query, and the value is the GraphQL query.

to JSON stringify the query here. So like I said, the key is query, and the value is the GraphQL query. So let me just use backticks here, and we can just paste in the query here. So let's just grab that, I'll grab it from here actually, okay. Space that in, let's reformat this, okay. And after this, we can say .then, let's just change the response to JSON, okay. And then one more, .then, we can grab the result, and hopefully the result is correct. Sorry, that should be an error function, and let's just console.log that, okay. Hopefully I did this correctly. Let's save that, and let's take a look at our browser here.

Hopefully I did this correctly. Let's save that, and let's take a look at our browser here. Let's open up DevTools, and we get an error. It says JSON.stringify .then is not a function. Yeah, this stuff should be outside. So after this, I believe, okay. And now we're getting CORS errors for our backend, so we have to enable that. So I have the Laravel app behind here. So just go to your CORS config, so /config/cors.php, and for our paths, we want to allow the GraphQL path as well.

So just go to your config, so /config/coarse.php, and for our paths, we want to allow the GraphQL path as well. So say GraphQL, save that, and hopefully that fixes it. Let's refresh this, and now we are getting the correct data here. So data, posts, and there are our posts, cool. So let's store this in a variable and show it in the browser here. So back to our frontend. Let's make a new piece of state here called posts, and we'll put it right here, const posts equals. Let's make it a ref here, and it will be an empty array to start, and let's make sure

posts equals. Let's make it a ref here, and it will be an empty array to start, and let's make sure to import ref from vue here, okay. And after it's successful here, we can say posts.value equals result. So it was what, result, data, posts, data, result.data.posts.data, okay. And now we should be able to loop through that data. So let's just put something in our template down here. Let's just say ul, li, and let's put a v-for in here. So v-for, say post in posts, and the key is post.id, okay. And let's just output the title here.

So V4, say post in posts, and the key is postId, okay. And let's just output the title here. So post.title, okay. And if I did that correctly, hopefully it shows up here. And it does. Cool. Let's see if we can do a mutation as well. So let's add a button here. So let's just put it underneath here. Let's make it a button.

So let's just put it underneath here. Let's make it a button. Let's say mutation, and let's put a click handler on it. Click equals, say handleMutation, okay. And let's just put a function here. Let's put it underneath our onMounted hook, say function handleMutation, and we can pretty much do the same thing here, but it should be a mutation. So let's grab our fetch call, okay. Let's paste it in here. But now instead of this, let's grab the mutation we have in GraphQL Playground.

Let's paste it in here. But now instead of this, let's grab the mutation we have in GraphQL Playground. So let's comment this out. Let's grab this, okay. And hopefully this should work. So if I try it here, it does work in GraphQL Playground, okay. But let's try it in our Vue app. So into our code, let's replace this with the mutation, okay. Let's just re-invent this. And let's change the hard-coded string to hello from Vue, content from Vue, okay.

Let's just re-invent this. And let's change the hard-coded string to hello from Vue, content from Vue, okay. And instead of this, let's just alert post was created. Okay, let's try this out. Back to our Vue app. There's the button. There's the alert. And we can just double-check our database here. And there it is. Cool.

And there it is. Cool. So yeah, if you only need to make one or two GraphQL requests, then you can just make use of fetch or axios like you're used to and pass in the appropriate JSON data for your GraphQL queries and mutations.