Can't refetch query useffect React native expo Apollo

Posted 2023-02-19

【中文标题】Can\'t refetch query useffect React native expo Apollo

【英文标题】：Can't refetch query useffect React native expo ApolloCan't refetch query useffect React native expo Apollo

【发布时间】：2022-01-13 14:34:27

【问题描述】：

我目前正在 React Native 中开发一个应用程序，我决定使用 Graphql 和 Apollo。 我的登录/注销组件有问题。我选择这样做：

谷歌登录 btn 触发了一个在谷歌数据库中获取用户数据的函数 然后当我得到结果时，我使用 google_id 检查我的数据库中是否已经有用户注册，如果有，我“导航”到另一个屏幕，如果没有，我创建一个用户，保存它，然后我导航。 如果用户想注销，只需点击注销按钮即可。

我的问题是，当我尝试在同一个博览会会话中多次登录/注销时，有时查询不会重新获取并且我卡在加载页面上。

我尝试使用 useQuery 中的 skip 属性解决此问题 => 当 google 的数据到来时，我发送了一个 LoggedInWithGoogle 操作，它是一个布尔值，我将它用于跳过值。 然后我尝试了lazyQuery，并在一个 useEffect 挂钩中使用了它，该挂钩在 signInWithGoogle 值更改时触发。 我使用了一些 console.log 来检查是否调用了 getUser() 函数，从我看到的情况来看，但没有调用 onComplete 方法，所以我真的不知道这里有什么问题，如果有人可以帮忙？

        useEffect(() => 
        if (response?.type === 'success') 
          console.log('response successful')
          WebBrowser.maybeCompleteAuthSession();
          const  authentication  = response;
          dispatch(loggedInWithGoogle(true));
          let accessToken: string | undefined = authentication?.accessToken;
          getUserInfos(accessToken);
        
    
        return function cleanup() 
          setIsMounted(false);
        
      , [response]);

 const [getUser,  called, loading, data ] = useLazyQuery(
    GET_USER,
    
      variables:  google_id: user.google_id ,
      onCompleted: () => 
        console.log('request completed', data)
        handleData(data);

      
    
  );

  useEffect(() => 
    if(googleLogged) 
      console.log('fetching', called)
      getUser();
      console.log('fetched')
    
  , [googleLogged])

【参考方案1】：

不看更多代码很难知道。但是，如果即使状态发生变化，useEffect 也没有触发，这可能是由于 useEffect 依赖项的限制。本质上 useEffect 不会对对象属性执行相等性检查。所以它不一定承认发生了变化。

如果这是问题所在，请尝试使用基本类型作为依赖项（例如根据响应更改的道具），或者在完成后将响应设置为未定义。如果对象很小，您还可以在存储之前对对象进行 JSON.stringify。

这是一篇很好地解释了这个问题的文章 https://coletiv.com/blog/dangers-of-using-objects-in-useState-and-useEffect-ReactJS-hooks/

【讨论】：

感谢您的回答，但我终于找出了问题所在，我不得不重置我的 redux 状态并解决问题。