如何修改Apollo Client中GraphQL的端点URL名称？

当然可以修改GraphQL端点的URL名称啦！既然你已经成功把服务端跑在localhost:4000，并且客户端调用一切正常，调整端点路径其实只需要两步操作：

第一步：修改服务端的端点路由配置 #

假设你的服务端是用Express + Apollo Server搭建的，原来的端点配置大概是这样的：

// 原服务端代码示例
app.use('/graphql', graphqlHTTP({
  schema: yourSchema,
  graphiql: true, // 如果你开启了GraphiQL调试工具
}));

你只需要把/graphql改成你想要的任意路径，比如/api/blog-graphql或者/my-custom-endpoint，修改后代码如下：

// 修改后的服务端代码
app.use('/api/blog-graphql', graphqlHTTP({
  schema: yourSchema,
  graphiql: true,
}));

这一步完成后，服务端的GraphQL端点就变成了http://localhost:4000/api/blog-graphql

第二步：更新客户端的Apollo Client配置 #

回到你客户端的index.js文件，把ApolloClient初始化时的uri字段替换成新的端点URL即可：

// 修改后的客户端index.js代码
const client = new ApolloClient({ 
  uri: "http://localhost:4000/api/blog-graphql", // 替换为新的端点路径
  cache: new InMemoryCache() 
});

最后验证修改效果 #

完成上面两步后，重启服务端和客户端，你可以做两个验证：

• 打开浏览器访问新的GraphiQL地址（比如http://localhost:4000/api/blog-graphql），确认调试工具能正常加载
• 运行客户端代码，检查<Query>组件是否还能正常获取到GET_BLOG查询的博客数据

另外要注意：如果你的服务端配置了CORS、认证之类的中间件，要确保新的端点路径也被这些中间件正确覆盖，避免出现跨域或者权限访问的问题。

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