WooCommerce + GraphQL+ NuxtJs, What I have learned?

I recently join emlogicx as Software Engineer and as my first project, I was asked to build an App with the WordPress API (GraphQL). Here are some of the features/issues I came across and how I implemented/solved them.
If you're reading then I guess you have probably read or you know what the about woo-commerce, GraphQL and NuxtJs. If not, I suggest you take a minute to check them out.
Setting up GraphQL
First things first, we need our woo-commerce application to be wrapped under GraphQL. To do this weed a couple of plugins to pull in
- WPGraphQL - provides a GraphQL endpoint with the implementation of basic WordPress CRUD objects (pages, users, posts ...). You should be able to install via WordPress Plugin manager
- WooGraphQL - It adds WooCommerce functionality to the WPGraphQL schema using WooCommerce's CRUD objects. As of when I'm writing, this doesn't have a stable release yet, so you will have to install it manually. Pull in the latest release.
- WPGraphQL-JWT-Authentication (Optional) - Install & activate to add a login mutation that returns a JSON Web Token. Requires manual install too 👉 Here
- WPGraphQL-CORS (Optional) - Install & activate to add an extra layer of security using HTTP CORS and some of WPGraphQL's advanced functionality. (Manual Installation 👉 Here)
With the plugins above, you have a GraphQL endpoint to one of the most maintained e-commerce CMS in this day and age. WPGraphQL provides a quick GraphiQL interface to browse the schema of the endpoint, which you can access via https://youhost.com/wp-admin/admin.php?page=graphiql-ide
You should be able to retrieve products and other woo-commerce. You should browse through the schema. There's a lot to lot at depending on what you're building.
Now that we have GraphQL running I think we are comfortable moving to our NuxtJs App. Check out these amazing articles on integrating NuxtJs to a GraphQL Endpoint. (I'll wait...)
- https://www.netlify.com/blog/2020/10/26/graphql-with-hasura-and-nuxt/
- https://alexclark.co.nz/blog/using-apollo-and-graphql-with-nuxt-js/
At this point, I think we're able to get query data from our GraphQL Endpoint via Nuxt + Apollo, then this should make sense.
<template>

<div>
<ul v-if="products">
<li v-for="product in products.nodes" :key="product.id">
{{ product.name }} - {{product.price}}
</li>
</ul>
</div>
</template>
<script>
import gql from 'graphql-tag';
export default {
apollo: {
products: {
query: gql`
 query fetchProducts {
products {
nodes {
name
id
price
}
}
}`
}
}
}
</script>
That should get you started.