Nextjs urql 身份验证交换在服务器上运行时应该在客户端上运行答案

【问题标题】：Nextjs urql auth exchange running on server when it should run on clientNextjs urql 身份验证交换在服务器上运行时应该在客户端上运行
【发布时间】：2022-10-17 02:06:24
【问题描述】：

当尝试向我的 urql 客户端添加身份验证交换时，它会在应用程序启动时在服务器上运行，随后在客户端上运行，直到刷新。问题出在我的getAuth 函数中，如下所示：

const getAuth = async ({ authState }) => {
    const token = localStorage.getItem('5etoken');

    if (!authState) {
        if (token) {
            return { token };
        }
        return null;
    }

    if (token) {
        const decoded = jwt.decode(token) as jwt.JwtPayload;

        if (decoded.exp !== undefined && decoded.exp < Date.now() / 1000) {
            return { token };
        }
    }

    return null;
};

当我运行我的应用程序时，我收到一条错误消息，指出 localStorage 未定义。如果我检查该功能是否在浏览器中运行，那么我的令牌永远不会在应用程序启动时设置，并且当我刷新页面时我会注销，所以我不能使用这种方法。我尝试了多种方法：

使用 dynamic imports 和 ssr 设置为 false
在 useEffect 挂钩中创建客户端
使用next-urql的withUrqlClient HOC 仅在浏览器中使用身份验证交换
我尝试过的所有方法都没有奏效，而且我的想法已经不多了。

【问题讨论】：

标签： next.js urql

【解决方案1】：

我最终发现createClient 在服务器端被调用。我设法通过在useEffect 钩子中创建客户端来强制它在浏览器中运行。我不确定为什么几个月前在useEffect 中创建它不起作用。

【讨论】：