从 Apollo 查询设置初始反应上下文状态答案

【问题标题】：Setting Initial React Context State from Apollo Query从 Apollo 查询设置初始反应上下文状态
【发布时间】：2021-12-14 18:32:08
【问题描述】：

我正在使用 React.js，特别是 Next.js，并且我有一个供用户使用的全局 React 上下文。上下文本身看起来像：

const UserContext = createContext<{
  user: User | undefined;
  setUser: (u: User | undefined) => void;
}>({
  user: undefined,
  setUser: () => {},
});

export const UserProvider = ({ children }: { children: JSX.Element }) => {
  const [user, setUser] = useState<User | undefined>(undefined);

  return (
    <UserContext.Provider value={{ user: user, setUser: setUser }}>
      {children}
    </UserContext.Provider>
  );
};

export const useUser = () => React.useContext(UserContext);

我正在我的 _app.tsx 文件中建立它，如下所示：

<UserProvider>
    <Component {...pageProps} />
</UserProvider>

但是，我希望网站在初始页面加载时使用 localstorage 获取 accessToken，然后使用 Apollo Graphql 查询服务器是否已经登录用户。为此，我尝试添加以下是我的上下文提供者：

// in User Provider
...

  const { data, loading, error } = useQuery<{ me: UserResponse }>(MeQuery);
  const initialUser = data?.me.user;
  const [user, setUser] = useState<User | undefined>(initialUser);
...

这没有按预期工作。当我记录这个 sn-p 的输出时，它会将所有内容打印两次，一次是未定义的，然后一次是查询结果的值。但是第二次它没有被保存到状态变量中，所以当我从其他组件访问UserContext 时，它说User 未定义。如何将第二个渲染结果与来自服务器的实际数据保存在我的状态变量中？

【问题讨论】：

当data 值发生变化时，尝试在useEffect 中调用setUser(data)。确保在useEffect 的依赖数组中添加data。
@juliomalves 非常感谢！这行得通，如果您将其添加为答案，我将接受并投票。

标签： reactjs react-hooks next.js apollo-client react-apollo

【解决方案1】：

要使user 值与data 保持同步，您应该在数据值更改时在useEffect 内调用setUser(data)。

export const UserProvider = ({ children }: { children: JSX.Element }) => {
    const [user, setUser] = useState<User | undefined>(undefined);

    const { data, loading, error } = useQuery<{ me: UserResponse }>(MeQuery);
    
    useEffect(() => {
        setUser(data);
    }, [data]);

    return (
        <UserContext.Provider value={{ user: user, setUser: setUser }}>
            {children}
        </UserContext.Provider>
    );
};

【讨论】：