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

1. 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
2. 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.
3. WPGraphQL-JWT-Authentication (Optional) - Install & activate to add a login mutation that returns a JSON Web Token. Requires manual install too 👉 Here
4. 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.