refactor(typegen): turn off fragment masking and fix typegen config (#560)

refactor(typegen): turn off fragment masking
- because it complicates things too much and gives little gain for devs

fix(lib): lint

fix(codegen): document syntax
- ? is preventing the codegen from matching anything

Author: MrOrz

codegen.ts

@@ -3,15 +3,17 @@ import { CodegenConfig } from '@graphql-codegen/cli';
 const config: CodegenConfig = {
   // schema: 'http://localhost:5000/graphql',
   schema: 'https://dev-api.cofacts.tw/graphql',
-  documents: ['pages/**/*.tsx?', 'components/**/*.tsx?', 'lib/**/*.tsx'],
+  documents: [
+    'pages/**/*.{ts,tsx}',
+    'components/**/*.{ts,tsx}',
+    'lib/**/*.{ts,tsx}',
+  ],
   generates: {
     './typegen/': {
       preset: 'client',
       plugins: [],
       presetConfig: {
-        // Rename useFragment to avoid conflicting with ESLint React hook rule
-        // https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#embrace-fragment-masking-principles
-        fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
+        fragmentMasking: false,
       },
     },
   },

lib/__tests__/text.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import { makeFragmentData } from '../../typegen';
-import {
-  linkify,
-  nl2br,
-  truncate,
-  highlightSections,
-  HighlightFields,
-} from '../text';
+import { linkify, nl2br, truncate, highlightSections } from '../text';
 
 describe('text', () => {
   describe('linkify', () => {
@@ -185,28 +178,22 @@ describe('highlightSections', () => {
   it('return empty arrays for empty highlights', () => {
     expect(
       highlightSections(
-        makeFragmentData(
-          {
-            text: null,
-            reference: null,
-            hyperlinks: null,
-          },
-          HighlightFields
-        ),
+        {
+          text: null,
+          reference: null,
+          hyperlinks: null,
+        },
         classes
       )
     ).toMatchInlineSnapshot(`Array []`);
 
     expect(
       highlightSections(
-        makeFragmentData(
-          {
-            text: null,
-            reference: null,
-            hyperlinks: [],
-          },
-          HighlightFields
-        ),
+        {
+          text: null,
+          reference: null,
+          hyperlinks: [],
+        },
         classes
       )
     ).toMatchInlineSnapshot(`Array []`);
@@ -215,23 +202,20 @@ describe('highlightSections', () => {
   it('wraps <mark> to all highlightable fields', () => {
     expect(
       highlightSections(
-        makeFragmentData(
-          {
-            text:
-              '<HIGHLIGHT>Lorem ipsum</HIGHLIGHT> dolor sit <HIGHLIGHT>amet</HIGHLIGHT>, consectetur <HIGHLIGHT>adipiscing elit</HIGHLIGHT>',
-            reference:
-              '【誤導】<HIGHLIGHT>大陸東北男子穿短袖短褲晨跑</HIGHLIGHT>？<HIGHLIGHT>凍成人型冰棍影片</HIGHLIGHT>？2018酒醉凍傷致死事件\n\nMyGoPen查證參考：\nhttps://www.mygopen.com/2021/01/freeze-Morning-jogging.html',
-            hyperlinks: [
-              {
-                title:
-                  '<HIGHLIGHT>MyGoPen</HIGHLIGHT>｜這是假消息:  【假LINE】大同寶寶貼圖詐騙新手法！連到外部網站再騙你加',
-                summary:
-                  '今年為一九<HIGHLIGHT>六四</HIGHLIGHT>年以來首度無颱風侵台',
-              },
-            ],
-          },
-          HighlightFields
-        ),
+        {
+          text:
+            '<HIGHLIGHT>Lorem ipsum</HIGHLIGHT> dolor sit <HIGHLIGHT>amet</HIGHLIGHT>, consectetur <HIGHLIGHT>adipiscing elit</HIGHLIGHT>',
+          reference:
+            '【誤導】<HIGHLIGHT>大陸東北男子穿短袖短褲晨跑</HIGHLIGHT>？<HIGHLIGHT>凍成人型冰棍影片</HIGHLIGHT>？2018酒醉凍傷致死事件\n\nMyGoPen查證參考：\nhttps://www.mygopen.com/2021/01/freeze-Morning-jogging.html',
+          hyperlinks: [
+            {
+              title:
+                '<HIGHLIGHT>MyGoPen</HIGHLIGHT>｜這是假消息:  【假LINE】大同寶寶貼圖詐騙新手法！連到外部網站再騙你加',
+              summary:
+                '今年為一九<HIGHLIGHT>六四</HIGHLIGHT>年以來首度無颱風侵台',
+            },
+          ],
+        },
         classes
       )
     ).toMatchInlineSnapshot(`

lib/text.tsx

@@ -1,9 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { gql } from 'graphql-tag';
-import { print } from 'graphql';
 import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
-import { FragmentType, getFragmentData } from '../typegen/fragment-masking';
-import { graphql } from '../typegen';
+import { HighlightFieldsFragment } from 'typegen/graphql';
 
 const BREAK = { $$BREAK: true } as const;
 
@@ -260,7 +258,7 @@ function getMarkElems(
     .filter(jsxElem => !!jsxElem);
 }
 
-const TypedHighlightFields = graphql(/* GraphQL */ `
+export const HighlightFields = gql`
   fragment HighlightFields on Highlights {
     text
     reference
@@ -269,31 +267,20 @@ const TypedHighlightFields = graphql(/* GraphQL */ `
       summary
     }
   }
-`);
-
-/**
- * @deprecated - Remove export after all dependent queries use codegen graphql() instead of graphql-tag gql.
- * @see https://stackoverflow.com/a/72802504/1582110
- */
-export const HighlightFields = gql`
-  ${print(TypedHighlightFields)}
 `;
 
 /**
  * Processes Highlights object from rumors-api
  */
 export function highlightSections(
-  highlightFields: FragmentType<typeof TypedHighlightFields>,
+  highlightFields: HighlightFieldsFragment,
   classes: {
     highlight?: string;
     reference?: string;
     hyperlinks?: string;
   }
 ) {
-  const { text, reference, hyperlinks } = getFragmentData(
-    TypedHighlightFields,
-    highlightFields
-  );
+  const { text, reference, hyperlinks } = highlightFields;
 
   const jsxElems = [];