2. graphQl support.md

Introduction

Vue storefront now supports using graphQl as an alternative API endpoint to get data for products, categories, products, and taxerules. For now Graphql uses resolver what fetch data from Elasticsearch. But potentialy can have different resolvers working with different Search Engines / 3rd Party APIs

GraphQl Schema

Graphql request to this API have to match query schema defined For product it is

type Query {
    products (
        search: String @doc(description: "Performs a full-text search using the specified key words."),
        filter: ProductFilterInput @doc(description: "Identifies which product attributes to search for and return."),
        pageSize: Int = 20 @doc(description: "Specifies the maximum number of results to return at once. This attribute is optional."),
        currentPage: Int = 1 @doc(description: "Specifies which page of results to return. The default value is 1."),
        sort: ProductSortInput @doc(description: "Specifies which attribute to sort on, and whether to return the results in ascending or descending order.")
        ): Products
}

which has result of type Products

type Products @doc(description: "The Products object is the top-level object returned in a product search") {
    items: JSON @doc(description: "An array of products that match the specified search criteria")
    page_info: SearchResultPageInfo @doc(description: "An object that includes the page_info and currentPage values specified in the query")
    total_count: Int @doc(description: "The number of products returned")
    aggregations: JSON @doc(description: "Layered navigation filters array as aggregations")
    sort_fields: SortFields @doc(description: "An object that includes the default sort field and all available sort fields")
}

and uses defined resolver

const resolver = {
  Query: {
    products: (_, { search, filter, sort, currentPage, pageSize }, context, rootValue) =>
      list(filter, sort, currentPage, pageSize, search, context, rootValue)
  }
}

For other entity types you can check schemas and resolvers in the /src/graphql/elasticsearch correspond subfolder

GraphQl server host and test tool

graphql server host is:

<config.server.host>:<config.server.port>/graphql

So by default it is http://localhost:8080/graphql

Also for testing graphql requests Graphiql web tool can be used. It can be accesible by url:

<config.server.host>:<config.server.port>/graphiql

This tool allow to test graphql request online and show graphql server response immediatelly nad could be helpful fro development process.

Example request

Below is an example request for product

{
  products(search: "bag", filter: {
    status: {
      in: [0, 1], scope: "default"
    },
    stock: {
      is_in_stock: {eq: true, scope: "default"}
    },
    visibility: {
      in: [3, 4], scope: "default"}
  },
    sort: {
      updated_at: DESC
    }
  ) {
    items
    total_count
    aggregations
    sort_fields {
      options {
        value
      }
    }
    page_info {
      page_size
      current_page
    }
  }
}

To see all available product filter options please check ProductFilterInput type in the graphQl product schema