test(load): add K6 load test workflow with example test

This commit adds a GitHub Actions workflow (you have to *manually*
trigger it) that uses the K6 load testing utillity to run tests on a
given environment.

I had to add the `K6_API_TOKEN` secret to GitHub to allow running the
tests in K6's cloud (VSF has a paid plan). You can also run the test on
GitHub's agent though.

M2-899

fix: use js, not ts file

chore: partially revert #1107

This reverts commit 9b8de85.

This change was made because K6 recorded tests are gigantic when
customQuery sends the GraphQL AST in the request body. After this
change, this the request is sent in string form, but is converted into
GraphQL AST on the middleware side (because Apollo GraphQL client
expects AST (DocumentNode TS type), not string)

test(load): improve gql requests

refactor: fix newlines

Author: sethidden

.eslintrc.js

@@ -30,6 +30,9 @@ module.exports = {
     '@vue-storefront/eslint-config-vue',
     '@vue-storefront/eslint-config-jest',
   ],
+  globals: {
+    "__ENV": "readonly",
+  },
   rules: {
     "@typescript-eslint/no-floating-promises": "off",
     "jest/expect-expect": [

.github/workflows/run-k6-load-test.yml

@@ -0,0 +1,52 @@
+name: Run K6 test file
+on:
+  workflow_dispatch:
+    inputs:
+      cloud:
+        description: True = run in K6 cloud; False = run on the test on GitHub Actions agent
+        required: true
+        default: false
+        type: boolean
+
+      filename:
+        description: The K6 test file to run relative to repository root
+        required: true
+        default: packages/theme/tests/load/searchProduct.js
+        type: string
+
+      environment:
+        description: The full URL of the environment on which load tests will be ran
+        required: true
+        default: https://demo-magento2-canary.europe-west1.gcp.storefrontcloud.io
+        type: choice
+        options:
+          - https://demo-magento2-canary.europe-west1.gcp.storefrontcloud.io
+          - https://demo-magento2-dev.europe-west1.gcp.storefrontcloud.io
+          - https://demo-magento2.europe-west1.gcp.storefrontcloud.cloud
+          - https://demo-magento2-enterprise.europe-west1.gcp.storefrontcloud.io
+
+      flags:
+        description: Additional argument and flags to provide to the k6 CLI. See https://k6.io/docs/using-k6/options for details.
+        required: false
+        default: ''
+        type: string
+
+jobs:
+  build:
+    name: Run k6 cloud test
+    runs-on: ubuntu-latest
+    environment: test
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Run k6 cloud test
+        uses: grafana/[email protected]
+        with:
+          cloud: ${{ inputs.cloud }}
+          token: ${{ secrets.K6_CLOUD_API_TOKEN }}
+          filename: ${{ inputs.filename }}
+          flags: ${{ inputs.flags }}
+        env:
+          BASE_URL: ${{ inputs.environment }}

packages/api-client/src/api/customMutation/index.ts

@@ -1,5 +1,5 @@
+import gql from 'graphql-tag';
 import { FetchPolicy, FetchResult } from '@apollo/client/core';
-import { DocumentNode } from 'graphql';
 import { Context } from '../../types/context';
 import getHeaders from '../getHeaders';
 
@@ -10,12 +10,12 @@ export default async <MUTATION = any, MUTATION_VARIABLES = any>(
     mutationVariables,
     fetchPolicy,
   }: {
-    mutation: DocumentNode,
+    mutation: string,
     mutationVariables: MUTATION_VARIABLES,
     fetchPolicy?: Extract<FetchPolicy, 'network-only' | 'no-cache'>,
   },
 ): Promise<FetchResult<MUTATION>> => context.client.mutate<MUTATION, MUTATION_VARIABLES>({
-  mutation,
+  mutation: gql`${mutation}`,
   variables: { ...mutationVariables },
   fetchPolicy: fetchPolicy || 'no-cache',
   context: {

packages/api-client/src/api/customQuery/index.ts

@@ -1,5 +1,5 @@
+import gql from 'graphql-tag';
 import { ApolloQueryResult, FetchPolicy } from '@apollo/client/core';
-import { DocumentNode } from 'graphql';
 import { Context } from '../../types/context';
 import getHeaders from '../getHeaders';
 
@@ -10,12 +10,12 @@ export default async <QUERY = any, QUERY_VARIABLES = any>(
     queryVariables,
     fetchPolicy,
   }: {
-    query: DocumentNode,
+    query: string,
     queryVariables?: QUERY_VARIABLES,
     fetchPolicy?: FetchPolicy,
   },
 ): Promise<ApolloQueryResult<QUERY>> => context.client.query<QUERY, QUERY_VARIABLES>({
-  query,
+  query: gql`${query}`,
   variables: { ...queryVariables },
   fetchPolicy: fetchPolicy || 'no-cache',
   context: {

packages/api-client/src/types/API.ts

@@ -1,5 +1,5 @@
 import { ApolloQueryResult, FetchPolicy, FetchResult } from '@apollo/client/core';
-import { DocumentNode, ExecutionResult } from 'graphql';
+import { ExecutionResult } from 'graphql';
 import { CustomQuery } from '@vue-storefront/core';
 import {
   AddConfigurableProductsToCartInput,
@@ -278,13 +278,13 @@ export interface MagentoApiMethods {
   ): Promise<ApolloQueryResult<CustomerOrdersQuery>>;
 
   customQuery<QUERY, QUERY_VARIABLES = any>(params: {
-    query: DocumentNode,
+    query: string,
     queryVariables?: QUERY_VARIABLES,
     fetchPolicy?: FetchPolicy,
   }): Promise<ApolloQueryResult<QUERY>>;
 
   customMutation<MUTATION, MUTATION_VARIABLES = any>(params: {
-    mutation: DocumentNode,
+    mutation: string,
     mutationVariables: MUTATION_VARIABLES,
     fetchPolicy?: Extract<FetchPolicy, 'network-only' | 'no-cache'>,
   }): Promise<FetchResult<MUTATION>>;

packages/theme/components/TopBar/checkStoresAndCurrency.gql.ts

@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-export default gql`
+export default `
   query getStoresAndCurrencies {
       availableStores {
         store_code

packages/theme/composables/useApi/index.ts

@@ -1,5 +1,4 @@
 import { useContext } from '@nuxtjs/composition-api';
-import type { DocumentNode } from 'graphql';
 import { Logger } from '~/helpers/logger';
 
 export type FetchPolicy = 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby';
@@ -19,7 +18,7 @@ export type Error = {
 };
 
 export type Request = <DATA, VARIABLES extends Variables = Variables>(
-  request: DocumentNode,
+  request: string,
   variables?: VARIABLES,
   fetchPolicy?: FetchPolicy,
 ) => Promise<{ data: DATA, errors: Error[] }>;
@@ -75,10 +74,6 @@ export interface UseApiInterface {
   mutate: Request;
 }
 
-function getGqlString(doc: DocumentNode) {
-  return doc.loc && doc.loc.source.body;
-}
-
 /**
  * Allows executing arbitrary GraphQL queries and mutations.
  *
@@ -93,7 +88,7 @@ export function useApi(): UseApiInterface {
     variables,
   ) => {
     const reqID = `id${Math.random().toString(16).slice(2)}`;
-    Logger.debug(`customQuery/request/${reqID}`, getGqlString(request));
+    Logger.debug(`customQuery/request/${reqID}`, request);
     const { data, errors } = await context.app.$vsf.$magento.api.customQuery({ query: request, queryVariables: variables });
     Logger.debug(`customQuery/result/${reqID}`, { data, errors });
 
@@ -106,7 +101,7 @@ export function useApi(): UseApiInterface {
     variables,
   ) => {
     const reqID = `id${Math.random().toString(16).slice(2)}`;
-    Logger.debug(`customQuery/request/${reqID}`, getGqlString(request));
+    Logger.debug(`customQuery/request/${reqID}`, request);
     const { data, errors } = await context.app.$vsf.$magento.api.customMutation({ mutation: request, mutationVariables: variables });
     Logger.debug(`customQuery/result/${reqID}`, { data, errors });
 

packages/theme/modules/catalog/category/components/cms/categoryContent.gql.ts

@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-export default gql`
+export default `
   query getCategoryContentData($filters: CategoryFilterInput) {
     categoryList(filters: $filters) {
       uid

packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts

@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-export default gql`
+export default `
   query getProductFiltersByCategory($categoryIdFilter: FilterEqualTypeInput!) {
     products(filter: { category_uid: $categoryIdFilter }) {
       aggregations {

packages/theme/modules/catalog/category/composables/useFacet/getFacetData.gql.ts

@@ -1,10 +1,8 @@
-import gql from 'graphql-tag';
-
 /**
  * GraphQL Query that fetches products using received search term and the params
  * for filter, sort and pagination.
  */
-export default gql`
+export default `
   query getFacetData($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
     products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
       items {