GraphQL Express React中实现黑底纯JSON格式API响应展示求助

你提到Open Library没用到CSS是误解——它的效果是靠浏览器内置JSON渲染实现的：后端直接返回application/json类型的响应，浏览器自动识别并应用黑底高亮的默认样式。而你当前是通过React前端渲染JSON字符串，所以分两种方案实现需求：

方案一：后端直接返回JSON（和Open Library逻辑完全一致） #

不需要前端React介入，让后端针对/API/:hash路径直接返回纯JSON响应：

修改后端main.ts #

在Apollo中间件前新增路由，复用现有业务逻辑：

import { Request, Response } from 'express';
import Data from './src/graphql/resolver/api/Data';
import Books from './src/graphql/resolver/api/Books';

// 新增API路由，直接返回JSON
app.get('/API/:hash', async (req: Request, res: Response) => {
  try {
    const { hash } = req.params;
    // 调用现有Data逻辑验证API密钥
    const apiData = await Data(null, { api_key: hash });
    
    if ('message' in apiData) {
      return res.status(401).json(apiData);
    }
    
    // 获取关联书籍数据
    const books = await Books(apiData);
    const responseData = {
      ...apiData,
      books
    };
    
    // 设置响应类型为JSON，触发浏览器内置渲染
    res.setHeader('Content-Type', 'application/json');
    res.json(responseData);
  } catch (err) {
    res.status(500).json({ message: 'Internal Server Error' });
  }
});

// 保留原有的Apollo GraphQL中间件
app.use(
  '/gql',
  cors<cors.CorsRequest>({ origin: `http://${process.env.DOMAIN}:${process.env.CLIENT_PORT}`, credentials: true }),
  express.json(),
  cp(),
  expressMiddleware(server, {
    context: async ({ req, res }) => ({ req, res })
  })
);

用户访问/API/:hash时，后端直接返回JSON，浏览器会自动用黑底语法高亮样式展示，和Open Library效果完全一致。

方案二：前端React实现语法高亮（保留现有前端路由） #

如果必须保留React路由，使用专业语法高亮库react-syntax-highlighter模拟浏览器效果：

1. 安装依赖 #

npm install react-syntax-highlighter

2. 修改API.tsx #

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

interface Book {
    cover_i: string
    isbn: string
    title: string
    author_name: string
    __typename: string
}

const API: React.FC = () => {
    const { hash } = useParams<{ hash: string }>()
    const { loading, data, error } = useQuery(APIGQL, { variables: { api_key: hash } })
    const apiState = useSelector((state: RootState) => state.API)
    const dispatch = useDispatch()

    React.useEffect(() => {
        if (!loading && data) {
            const { __typename, books, ...api } = data.api
            dispatch(setApi({
                ...api,
                books: books.map(({ __typename, ...book }: Book) => book)
            }))
        }
    }, [data, error])

    if (loading) return <div>Loading...</div>
    if (error) return <div>Error: {error.message}</div>

    return (
        <SyntaxHighlighter language="json" style={tomorrow}>
            {JSON.stringify(apiState, null, 2)}
        </SyntaxHighlighter>
    )
}

export default API

该方案会在前端渲染出和浏览器内置效果一致的黑底高亮JSON。

补充说明 #

Open Library的样式并非无CSS，而是浏览器识别application/json响应后，自动应用了内置的CSS规则。如果通过前端渲染JSON字符串，就必须通过CSS或语法高亮库模拟这一效果。

内容的提问来源于stack exchange，提问作者VireZee