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

…scope (#3198) * Some preliminary work to get introspection working in v4 * Get new cli validation passing following the current eslint rules * Minor cleanup * Remove package from workspaces so it doesn't pollute node_modules with old version * Restore additional graphql validation through linting rules * - Re-add package dependencies that were being hidden by hoisting - Update scaffold template to remove old commands * Test adding additional files to copy command * Back out change that didn't work * Address PR feedback and resolve validation errors with name collisions. * Fix missed @client directive * Remove codegen section until we can resolve name conflicts * Colocate client schemas with components Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
magento · Jun 8, 2021 · adae9d8 · adae9d8
1 parent cd3cff2
commit adae9d8
Show file tree

Hide file tree

Showing 38 changed files with 2,306 additions and 1,260 deletions.
diff --git a/.eslintrc.js b/.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;
diff --git a/graphql.config.js b/graphql.config.js
@@ -0,0 +1,22 @@
+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
+    ]
+};
+
+module.exports = config;
diff --git a/package.json b/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": {

diff --git a/packages/extensions/venia-sample-payments-checkmo/client-schema.graphql b/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
+}
diff --git a/packages/extensions/venia-sample-payments-checkmo/src/talons/checkmo.gql.js b/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
         }

diff --git a/packages/pagebuilder/lib/ContentTypes/Block/__tests__/block.spec.js b/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 {

diff --git a/packages/pagebuilder/lib/__tests__/factory.spec.js b/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: () => {

diff --git a/packages/peregrine/.eslintrc.js b/packages/peregrine/.eslintrc.js
diff --git a/packages/peregrine/lib/Apollo/client-schema.graphql b/packages/peregrine/lib/Apollo/client-schema.graphql
@@ -0,0 +1,3 @@
+# Apollo specific directives used in the project
+directive @client on FIELD
+directive @connection(key: String) on FIELD
diff --git a/packages/peregrine/lib/talons/CartPage/GiftOptions/__tests__/useGiftOptions.spec.js b/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 {
             id
             include_gift_receipt
             include_printed_card
-            gift_message
+            local_gift_message
         }
     }
 `;
-/* 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'
             }
         }
     });

diff --git a/packages/peregrine/lib/talons/CartPage/GiftOptions/client-schema.graphql b/packages/peregrine/lib/talons/CartPage/GiftOptions/client-schema.graphql
@@ -0,0 +1,7 @@
+# Mocked client fields used for gift receipt and message components
+# TODO: As of 2.4.2 these fields now exist, we should remove these and update components.
+extend type Cart {
+    include_gift_receipt: Boolean!
+    include_printed_card: Boolean!
+    local_gift_message: String
+}
diff --git a/packages/peregrine/lib/talons/CartPage/GiftOptions/useGiftOptions.js b/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]);
 

diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/product.gql.js b/packages/peregrine/lib/talons/CartPage/ProductListing/product.gql.js
@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client';
 
-import { WishlistFragment } from './wishlistFragment';
+import { WishlistNameFragment } from './wishlistFragment';
 
 export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     query getConfigurableThumbnailSource {
@@ -35,11 +35,11 @@ export const ADD_TO_WISHLIST = gql`
             }
             wishlist {
                 id
-                ...WishlistFragment
+                ...WishlistNameFragment
             }
         }
     }
-    ${WishlistFragment}
+    ${WishlistNameFragment}
 `;
 
 export default {

diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/wishlistFragment.ce.js b/packages/peregrine/lib/talons/CartPage/ProductListing/wishlistFragment.ce.js
@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
-export const WishlistFragment = gql`
-    fragment WishlistFragment on Wishlist {
+export const WishlistNameFragment = gql`
+    fragment WishlistNameFragment on Wishlist {
         id
     }
 `;
diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/wishlistFragment.ee.js b/packages/peregrine/lib/talons/CartPage/ProductListing/wishlistFragment.ee.js
@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
-export const WishlistFragment = gql`
-    fragment WishlistFragment on Wishlist {
+export const WishlistNameFragment = gql`
+    fragment WishlistNameFragment on Wishlist {
         id
         name
     }

diff --git a/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/billingAddress.gql.js b/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/billingAddress.gql.js
@@ -3,11 +3,6 @@ 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 {

diff --git a/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/client-schema.graphql b/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/client-schema.graphql
@@ -0,0 +1,4 @@
+# Additional client field to persist same billing preference
+extend type Cart {
+    isBillingAddressSame: Boolean!
+}
diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/client-schema.graphql b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/client-schema.graphql
@@ -0,0 +1,4 @@
+# Additional client field needed for storing payment nonce returned by processors
+extend type Cart {
+    paymentNonce: String
+}
diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/creditCard.gql.js b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/creditCard.gql.js
@@ -3,11 +3,6 @@ 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 {
@@ -25,7 +20,6 @@ export const GET_PAYMENT_NONCE = gql`
         }
     }
 `;
-/* eslint-enable graphql/template-strings */
 
 export const GET_BILLING_ADDRESS = gql`
     query getBillingAddress($cartId: String!) {

diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentInformation.gql.js b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentInformation.gql.js
@@ -37,10 +37,7 @@ 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 {
@@ -49,7 +46,6 @@ export const GET_PAYMENT_NONCE = gql`
         }
     }
 `;
-/* eslint-enable graphql/template-strings */
 
 export const SET_BILLING_ADDRESS = gql`
     mutation setBillingAddress(

diff --git a/packages/peregrine/lib/talons/Header/client-schema.graphql b/packages/peregrine/lib/talons/Header/client-schema.graphql
@@ -0,0 +1,4 @@
+# Additional client field for storing selected currency
+extend type Currency {
+    current_currency_code: String!
+}