fix multiline deprecation display issue #3348

Author: acao

.changeset/fifty-numbers-draw.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+fix display of deprecation reason on field type docs

packages/graphiql-react/src/explorer/components/deprecation-reason.tsx

@@ -7,13 +7,17 @@ type DeprecationReasonProps = {
    * The deprecation reason as markdown string.
    */
   children?: string | null;
+  preview?: boolean;
 };
 
 export function DeprecationReason(props: DeprecationReasonProps) {
   return props.children ? (
     <div className="graphiql-doc-explorer-deprecation">
       <div className="graphiql-doc-explorer-deprecation-label">Deprecated</div>
-      <MarkdownContent type="deprecation" onlyShowFirstChild>
+      <MarkdownContent
+        type="deprecation"
+        onlyShowFirstChild={props.preview ?? true}
+      >
         {props.children}
       </MarkdownContent>
     </div>

packages/graphiql-react/src/explorer/components/field-documentation.tsx

@@ -24,7 +24,9 @@ export function FieldDocumentation(props: FieldDocumentationProps) {
           {props.field.description}
         </MarkdownContent>
       ) : null}
-      <DeprecationReason>{props.field.deprecationReason}</DeprecationReason>
+      <DeprecationReason preview={false}>
+        {props.field.deprecationReason}
+      </DeprecationReason>
       <ExplorerSection title="Type">
         <TypeLink type={props.field.type} />
       </ExplorerSection>

packages/graphiql/resources/webpack.config.js

@@ -12,7 +12,7 @@ const relPath = (...args) => path.resolve(__dirname, ...args);
 const rootPath = (...args) => relPath('../', ...args);
 
 const resultConfig = ({ isDev = false }) => {
-  const isHMR = Boolean(isDev && process.env.WEBPACK_DEV_SERVER);
+  const isHMR = Boolean(isDev && process.env.WEBPACK_SERVE);
 
   const config = {
     mode: isDev ? 'development' : 'production',
@@ -126,8 +126,8 @@ const resultConfig = ({ isDev = false }) => {
   }
   return config;
 };
-
-module.exports = [
-  resultConfig({ isDev: true }),
-  resultConfig({ isDev: false }),
-];
+const configs = [resultConfig({ isDev: true })];
+if (!process.env.WEBPACK_SERVE) {
+  configs.push(resultConfig({ isDev: false }));
+}
+module.exports = configs;