开启SSR后withUrqlClient无法正常工作该如何解决？

核心原因 #

你当前代码的问题主要来自以下几个优先级最高的错误点：

• 漏传withUrqlClient的第二个SSR开关配置项：withUrqlClient默认第二个参数为{ ssr: false }，仅修改内部Exchange配置不会自动开启SSR能力，需要显式传入配置开启。
• 服务端请求地址配置错误：你当前写的请求地址是https://localhost:4000/graphql，SSR阶段请求是从Node.js服务端发起，而非浏览器端，若本地GraphQL服务用的是HTTP协议、或是Node服务环境没有监听4000端口，会直接导致服务端请求失败，表现为前端看不到请求发出。
• 导入的ssrExchange实例冲突：你代码顶部导入了urql包的ssrExchange，但实际应该使用withUrqlClient回调参数传入的专属实例，若不慎混用了自己创建的ssrExchange实例，也会导致SSR阶段请求逻辑失效。

修复代码 #

你可以直接调整代码如下，核心是补充第二个SSR开关参数、修正请求协议、删除多余导入避免误用：

import { withUrqlClient } from "next-urql"
// 删除顶部多余的ssrExchange导入
import { dedupExchange,cacheExchange,fetchExchange } from "urql";
import { Navbar } from "../components/Navbar"
import { useTodosQuery } from "../generated/graphql";
import { createUrqlClient } from "../utils/createUrqlClient"

const Index = () => {
  const [{data}] = useTodosQuery();
  return(
    <>
    <Navbar/>
    <div>Hello world</div>
    <br></br>
    {!data ? (<div>Loading...</div>): data.todos.map((todo) => <div key={todo.id}>{todo.title}</div>)}
    </>
  )
};

// 补充第二个参数{ ssr: true }，根据你本地服务实际协议调整url前缀
export default withUrqlClient( (ssrExchange:any)=>({ 
  url:'http://localhost:4000/graphql',
  fetchOptions:{
    credentials:"include" 
  },
  exchanges: [dedupExchange,cacheExchange, ssrExchange, fetchExchange]
}), { ssr: true })(Index);

额外排查步骤 #

如果修改后仍然没有请求，按以下顺序排查：

• 查看Next.js服务端控制台的报错日志，确认是否存在服务端请求GraphQL接口失败的提示
• 确认useTodosQuery没有传入pause: true、ssr: false等禁用SSR请求的配置
• 若部署到非本地环境，将请求地址替换为你的GraphQL服务的公网可访问地址，避免Node服务端本地域名解析异常

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