[PWA-1658] Move graphql-cli-validate-magento-pwa-queries to @magento scope

.eslintrc.js

@@ -1,8 +1,11 @@
+const graphQLConfig = require('./graphql.config');
+
 const config = {
     parser: 'babel-eslint',
     plugins: ['react'],
     extends: ['@magento'],
     rules: {
+        'no-prototype-builtins': 'off',
         'no-undef': 'off',
         'no-useless-escape': 'off',
         'react/jsx-no-literals': [
@@ -15,7 +18,38 @@ const config = {
                 noStrings: true
             }
         ]
-    }
+    },
+    overrides: [
+        {
+            files: ['**/*.gql.js'],
+            processor: '@graphql-eslint/graphql'
+        },
+        {
+            files: ['*.graphql'],
+            parser: '@graphql-eslint/eslint-plugin',
+            parserOptions: {
+                operations: graphQLConfig.documents,
+                schema: graphQLConfig.schema,
+                schemaOptions: {
+                    assumeValid: true,
+                    method: 'GET'
+                },
+                skipGraphQLConfig: true
+            },
+            plugins: ['@graphql-eslint'],
+            rules: {
+                '@graphql-eslint/known-directives': 'error',
+                '@graphql-eslint/naming-convention': [
+                    'error',
+                    {
+                        ObjectTypeDefinition: 'PascalCase',
+                        leadingUnderscore: 'allow'
+                    }
+                ],
+                '@graphql-eslint/require-id-when-available': 'error'
+            }
+        }
+    ]
 };
 
 module.exports = config;

graphql.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+require('dotenv').config({
+    path: path.resolve(process.cwd(), 'packages/venia-concept/.env')
+});
+
+const excludePatterns =
+    process.env.MAGENTO_BACKEND_EDITION === 'EE'
+        ? ['!**/*.ce.js']
+        : ['!**/*.ee.js'];
+
+const config = {
+    schema: [
+        `${process.env.MAGENTO_BACKEND_URL}/graphql`,
+        '**/client-schema.graphql'
+    ],
+    documents: [
+        './packages/{peregrine,venia-ui,venia-concept}/{lib,src}/**/*.{js,graphql,gql}',
+        ...excludePatterns
+    ],
+    extensions: {
+        codegen: {
+            generates: {
+                './merged-schema.v4.json': {
+                    plugins: ['introspection']
+                }
+            }
+        }
+    }
+};
+
+module.exports = config;

package.json

@@ -6,7 +6,6 @@
     "packages/babel-preset-peregrine",
     "packages/create-pwa",
     "packages/extensions/*",
-    "packages/graphql-cli-validate-magento-pwa-queries",
     "packages/pagebuilder",
     "packages/peregrine",
     "packages/pwa-buildpack",
@@ -41,26 +40,29 @@
     "test:ci": "jest --no-cache --max-workers=3 --json --outputFile=test-results.json",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --no-cache --no-coverage --runInBand --testTimeout 86400",
     "test:dev": "jest --watch",
-    "validate-queries": "yarn venia run validate-queries",
+    "validate-queries": "graphql validate --keepClientFields --noStrictFragments",
     "venia": "yarn workspace @magento/venia-concept",
     "watch:all": "node scripts/watch-all.js",
     "watch:venia": "yarn venia run watch"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "~7.4.4",
+    "@graphql-cli/validate": "~2.1.0",
+    "@graphql-eslint/eslint-plugin": "~1.0.1",
     "@magento/eslint-config": "~1.5.0",
     "@types/jest": "~25.2.1",
+    "babel-eslint": "~10.1.0",
     "babel-plugin-dynamic-import-node": "~2.2.0",
     "babel-plugin-graphql-tag": "~2.0.0",
     "caller-id": "~0.1.0",
     "chalk": "~2.4.2",
     "chokidar": "~2.1.2",
     "coveralls": "~3.0.3",
     "danger": "^7.1.4",
-    "eslint": "~5.14.1",
+    "dotenv": "~6.2.0",
+    "eslint": "~7.27.0",
     "eslint-config-prettier": "~6.0.0",
     "eslint-plugin-babel": "~5.3.0",
-    "eslint-plugin-graphql": "~3.0.3",
     "eslint-plugin-jsx-a11y": "~6.2.1",
     "eslint-plugin-node": "~8.0.1",
     "eslint-plugin-package-json": "~0.1.4",
@@ -69,6 +71,10 @@
     "execa": "~1.0.0",
     "figures": "~2.0.0",
     "first-run": "~2.0.0",
+    "graphql": "~15.5.0",
+    "graphql-cli": "~4.1.0",
+    "graphql-config": "~3.3.0",
+    "graphql-tag": "~2.12.4",
     "identity-obj-proxy": "~3.0.0",
     "jest": "~26.0.1",
     "jest-fetch-mock": "~2.1.1",
@@ -83,9 +89,6 @@
     "sharp": "~0.23.3"
   },
   "resolutions": {
-    "graphql": "~14.3.1",
-    "**/graphql-cli/npm-run": "~5.0.0",
-    "**/graphql-cli/graphql-playground-middleware-express": "~1.7.18",
     "https-proxy-agent": "~2.2.3"
   },
   "engines": {

packages/extensions/venia-sample-payments-checkmo/client-schema.graphql

@@ -0,0 +1,4 @@
+extend type StoreConfig {
+    payment_checkmo_payable_to: String
+    payment_checkmo_mailing_address: String
+}

packages/extensions/venia-sample-payments-checkmo/src/talons/checkmo.gql.js

@@ -3,6 +3,7 @@ import { gql } from '@apollo/client';
 export const GET_CHECKMO_CONFIG_DATA = gql`
     query storeConfigData {
         storeConfig {
+            id
             payment_checkmo_payable_to @client
             payment_checkmo_mailing_address @client
         }

packages/pagebuilder/lib/ContentTypes/Block/__tests__/block.spec.js

@@ -29,6 +29,7 @@ test('renders a Block component', () => {
 
 test('renders a Block component with all props configured and Page Builder rich content', () => {
     const MockRow = () => 'Row';
+    // eslint-disable-next-line no-import-assign
     config.getContentTypeConfig = jest.fn().mockImplementation(contentType => {
         if (contentType === 'row') {
             return {

packages/pagebuilder/lib/__tests__/factory.spec.js

@@ -16,6 +16,7 @@ test('factory should render instance of content type', () => {
         }
     };
     const TestComponent = () => <mock-TestComponent />;
+    // eslint-disable-next-line no-import-assign
     config.getContentTypeConfig = jest.fn().mockImplementation(contentType => {
         if (contentType === 'test') {
             return {
@@ -52,6 +53,7 @@ test('factory should render all children content types', () => {
         <mock-ParentComponent>{children}</mock-ParentComponent>
     );
     const ChildComponent = () => <mock-ChildComponent />;
+    // eslint-disable-next-line no-import-assign
     config.getContentTypeConfig = jest.fn().mockImplementation(contentType => {
         if (contentType === 'parent') {
             return {
@@ -95,6 +97,7 @@ test('factory should not render hidden instance of a content type', () => {
         }
     };
     const TestComponent = () => <mock-TestComponent />;
+    // eslint-disable-next-line no-import-assign
     config['contentTypesConfig'] = {
         test: {
             configAggregator: () => {

packages/peregrine/lib/talons/CartPage/GiftOptions/__tests__/useGiftOptions.spec.js

@@ -10,18 +10,16 @@ import typePolicies from '../../../../Apollo/policies';
 
 import useGiftOptions from '../useGiftOptions';
 
-/* eslint-disable graphql/template-strings */
 const GET_GIFT_OPTIONS = gql`
     query getGiftOptions($cartId: String!) {
-        cart(cart_id: $cartId) @client {
+        cart(cart_id: $cartId) {
             id
-            include_gift_receipt
-            include_printed_card
-            gift_message
+            include_gift_receipt @client
+            include_printed_card @client
+            local_gift_message @client
         }
     }
 `;
-/* eslint-enable graphql/template-strings */
 
 jest.mock('@magento/peregrine/lib/context/cart', () => {
     const state = {
@@ -68,7 +66,7 @@ beforeEach(() => {
             id: 'cart123',
             include_gift_receipt: true,
             include_printed_card: false,
-            gift_message: 'GiftMessage'
+            local_gift_message: 'GiftMessage'
         }
     });
 });
@@ -133,7 +131,7 @@ test('it updates cache after updating gift message', async () => {
     expect(cacheWriteSpy.mock.calls[0][0]).toMatchObject({
         data: {
             cart: {
-                gift_message: 'Hello World'
+                local_gift_message: 'Hello World'
             }
         }
     });

packages/peregrine/lib/talons/CartPage/GiftOptions/useGiftOptions.js

@@ -57,7 +57,7 @@ const useGiftOptions = props => {
                         id: cartId,
                         include_gift_receipt: includeGiftReceipt,
                         include_printed_card: includePrintedCard,
-                        gift_message: giftMessage,
+                        local_gift_message: giftMessage,
                         ...optionsToUpdate
                     }
                 }
@@ -85,7 +85,7 @@ const useGiftOptions = props => {
         return throttle(
             (updateGiftOptions, newGiftMessage) => {
                 updateGiftOptions({
-                    gift_message: newGiftMessage
+                    local_gift_message: newGiftMessage
                 });
             },
             1000,
@@ -127,12 +127,12 @@ const useGiftOptions = props => {
             const {
                 include_gift_receipt,
                 include_printed_card,
-                gift_message
+                local_gift_message
             } = data.cart;
 
             setIncludeGiftReceipt(include_gift_receipt);
             setIncludePrintedCard(include_printed_card);
-            setGiftMessage(gift_message);
+            setGiftMessage(local_gift_message);
         }
     }, [setIncludeGiftReceipt, setIncludePrintedCard, data]);
 

packages/peregrine/lib/talons/CheckoutPage/BillingAddress/billingAddress.gql.js

@@ -3,16 +3,11 @@ import { gql } from '@apollo/client';
 import { PriceSummaryFragment } from '../../CartPage/PriceSummary/priceSummaryFragments.gql';
 import { AvailablePaymentMethodsFragment } from '../PaymentInformation/paymentInformation.gql';
 
-// We disable linting for local fields because there is no way to add them to
-// the fetched schema. Additionally, since we don't want to make a network call
-// for "id" we disable "required-fields"
-// https://github.com/apollographql/eslint-plugin-graphql/issues/99
-/* eslint-disable graphql/template-strings */
 export const GET_IS_BILLING_ADDRESS_SAME = gql`
     query getIsBillingAddressSame($cartId: String!) {
-        cart(cart_id: $cartId) @client {
+        cart(cart_id: $cartId) {
             id
-            isBillingAddressSame
+            isBillingAddressSame @client
         }
     }
 `;

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/creditCard.gql.js

@@ -3,29 +3,23 @@ import { gql } from '@apollo/client';
 import { PriceSummaryFragment } from '../../CartPage/PriceSummary/priceSummaryFragments.gql';
 import { AvailablePaymentMethodsFragment } from './paymentInformation.gql';
 
-// We disable linting for local fields because there is no way to add them to
-// the fetched schema. Additionally, since we don't want to make a network call
-// for "id" we disable "required-fields"
-// https://github.com/apollographql/eslint-plugin-graphql/issues/99
-/* eslint-disable graphql/template-strings */
 export const GET_IS_BILLING_ADDRESS_SAME = gql`
     query getIsBillingAddressSame($cartId: String!) {
-        cart(cart_id: $cartId) @client {
+        cart(cart_id: $cartId) {
             id
-            isBillingAddressSame
+            isBillingAddressSame @client
         }
     }
 `;
 
 export const GET_PAYMENT_NONCE = gql`
     query getPaymentNonce($cartId: String!) {
-        cart(cart_id: $cartId) @client {
+        cart(cart_id: $cartId) {
             id
-            paymentNonce
+            paymentNonce @client
         }
     }
 `;
-/* eslint-enable graphql/template-strings */
 
 export const GET_BILLING_ADDRESS = gql`
     query getBillingAddress($cartId: String!) {

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentInformation.gql.js

@@ -37,19 +37,15 @@ export const GET_PAYMENT_INFORMATION = gql`
     }
     ${AvailablePaymentMethodsFragment}
 `;
-// We disable linting for local fields because there is no way to add them to
-// the fetched schema.
-// https://github.com/apollographql/eslint-plugin-graphql/issues/99
-/* eslint-disable graphql/template-strings */
+
 export const GET_PAYMENT_NONCE = gql`
     query getPaymentNonce($cartId: String!) {
-        cart(cart_id: $cartId) @client {
+        cart(cart_id: $cartId) {
             id
-            paymentNonce
+            paymentNonce @client
         }
     }
 `;
-/* eslint-enable graphql/template-strings */
 
 export const SET_BILLING_ADDRESS = gql`
     mutation setBillingAddress(

packages/peregrine/lib/talons/Header/currencySwitcher.gql.js

@@ -25,10 +25,6 @@ export const CUSTOM_TYPES = {
     }
 };
 
-// We disable linting for local fields because there is no way to add them to
-// the fetched schema.
-// https://github.com/apollographql/eslint-plugin-graphql/issues/99
-/* eslint-disable graphql/template-strings */
 export const GET_CURRENCY = gql`
     query getCurrencyData {
         currency {
@@ -38,7 +34,6 @@ export const GET_CURRENCY = gql`
         }
     }
 `;
-/* eslint-enable graphql/template-strings */
 
 export default {
     getCurrencyQuery: GET_CURRENCY

packages/peregrine/lib/talons/Wishlist/GalleryButton/galleryButton.gql.js

@@ -14,13 +14,11 @@ export const ADD_TO_WISHLIST = gql`
     }
 `;
 
-/* eslint-disable graphql/template-strings */
 export const GET_PRODUCTS_IN_WISHLISTS = gql`
     query GetProductsInWishlistsForGallery {
         customerWishlistProducts @client
     }
 `;
-/* eslint-enable graphql/template-strings */
 
 export default {
     addProductToWishlistMutation: ADD_TO_WISHLIST,

packages/peregrine/package.json

@@ -20,6 +20,7 @@
     "fast-glob": "~3.2.4"
   },
   "devDependencies": {
+    "@apollo/client": "~3.1.2",
     "@magento/eslint-config": "~1.5.0",
     "@testing-library/react-hooks": "~5.0.3",
     "intl": "~1.2.5",