能否用GraphQL查询第三方API？Express+React场景技术咨询

首先直接给你明确答案：你不能直接用那个GraphQL查询去调用第三方API，但通过在你的Express后端搭建一个GraphQL中间层，完全可以实现只获取你需要的两个字段的需求。另外，使用GraphQL确实需要你控制后端的数据处理逻辑——因为GraphQL本质是你自己搭建的一个数据网关，用来封装底层的数据源（不管是数据库还是第三方API）。

下面详细拆解怎么做：

为什么不能直接查第三方API？ #

第三方API是REST风格的GET接口，它完全不懂GraphQL的查询语法。你写的query { gold_bid_usd_toz silver_bid_usd_toz }只能被GraphQL服务识别，所以你需要先在Express后端搭建自己的GraphQL服务，作为中间层去对接第三方API。

具体实现步骤 #

1. 在Express中搭建GraphQL服务 #

可以用apollo-server-express或者express-graphql，这里以Apollo Server为例：

首先安装依赖：

npm install apollo-server-express express node-fetch

2. 定义GraphQL Schema #

Schema用来声明你的GraphQL服务支持哪些查询字段，相当于给前端一个"数据菜单"：

const { gql } = require('apollo-server-express');

const typeDefs = gql`
  type Query {
    # 查询贵金属价格，返回需要的两个字段
    preciousMetalPrices: PreciousMetalPrices
  }

  type PreciousMetalPrices {
    gold_bid_usd_toz: String
    silver_bid_usd_toz: String
  }
`;

3. 编写Resolver获取并筛选数据 #

Resolver是GraphQL服务的核心，负责从数据源（这里是第三方API）获取数据，然后按照Schema的定义返回需要的字段：

const fetch = require('node-fetch');

const resolvers = {
  Query: {
    preciousMetalPrices: async () => {
      // 调用第三方API获取原始数据
      const response = await fetch('你的第三方API地址');
      const rawData = await response.json();
      
      // 只提取你需要的两个字段返回
      return {
        gold_bid_usd_toz: rawData.gold_bid_usd_toz,
        silver_bid_usd_toz: rawData.silver_bid_usd_toz
      };
    }
  }
};

4. 启动Express + GraphQL服务 #

把上面的部分整合起来，启动服务：

const express = require('express');
const { ApolloServer } = require('apollo-server-express');

async function startServer() {
  const app = express();
  const server = new ApolloServer({ typeDefs, resolvers });
  
  await server.start();
  server.applyMiddleware({ app });
  
  app.listen({ port: 4000 }, () => {
    console.log(`GraphQL服务运行在 http://localhost:4000${server.graphqlPath}`);
  });
}

startServer();

5. 前端React中发送GraphQL查询 #

用Apollo Client或者其他GraphQL客户端（比如Urql），向你的GraphQL服务发送查询：

// 假设用Apollo Client
import { useQuery, gql } from '@apollo/client';

const GET_METAL_PRICES = gql`
  query {
    preciousMetalPrices {
      gold_bid_usd_toz
      silver_bid_usd_toz
    }
  }
`;

function MetalPriceComponent() {
  const { loading, error, data } = useQuery(GET_METAL_PRICES);
  
  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错了: {error.message}</p>;
  
  return (
    <div>
      <p>黄金买入价: ${data.preciousMetalPrices.gold_bid_usd_toz}</p>
      <p>白银买入价: ${data.preciousMetalPrices.silver_bid_usd_toz}</p>
    </div>
  );
}

总结 #

• 你需要自己搭建GraphQL后端服务，作为中间层去调用第三方API，这样才能实现按需获取字段的需求。
• GraphQL确实需要你控制后端的数据处理——你定义Schema来约束返回的字段结构，通过Resolver来封装数据获取逻辑，把冗余数据过滤掉再返回给前端。

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