繁体   English   中英

ApolloClient useLazyQuery 第一次调用返回 undefined

[英]ApolloClient useLazyQuery first call return undefined

我在从 useLayzyQuery 获取请求时遇到问题。 我有登录屏幕,当用户填写表单时,它在 MyContext.Provider 中调用 LogIn function:

const GET_USER = gql`
  query($name: String!, $key: String!) {
    UserInfo(name: $name, key: $key) {
      Name
      PersonId
      ClassName
    }
  }
`;

export default function AuthProvider({children}) {
  const [callData, {called, loading, data, error, client}] = useLazyQuery(
    GET_USER,
  );

  if (called && loading) {
    return (
      <Center>
        <ActivityIndicator size="large" color="#0000ff" />
      </Center>
    );
  }

  return (
    <MyContext.Provider
      value={{
        LogIn: async (name, passw) => {
          let HashedName = base64.encode(name);
          let HashedPassw = base64.encode(passw);
          let connect = HashedName + ':' + HashedPassw;

          //key
          let key = base64.encode(connect);
          const user = {name: HashedName, key: key};

          await AsyncStorage.setItem('user', JSON.stringify(user), (err) => {
            if (err) {
              console.error(err);
            }
          });

          callData({variables: {name: HashedName, key: key}});

          console.log(data);
        },
      }}>
      {children}
    </MyContext.Provider>
  );
}

当我单击按钮时,它应该控制台记录我返回 useLazyQuery 的数据。 但是当我单击时,它返回未定义并且它在第二次单击时起作用。

这是我的文件结构:

<ApolloProvider client={makeApolloClient()}>
  <Authprovider>
   <Routes />
  </Authprovider>
</ApolloProvider>

这是我的 makeApolloClient function:

const makeApolloClient = () => {
  const httpLink = createHttpLink({uri: 'http://localhost:3000/graphql'});
  const middlewareLink = new ApolloLink(async (operation, forward) => {
    operation.setContext({
      headers:
        {
          authorization: await AsyncStorage.getItem('user', (err, result) => {
            if (err) {
              console.error(err);
            } else {
              console.log(result);
            }
          }),
        } || null,
    });
    return forward(operation);
  });

  const err = onError(({networkError}) => {
    console.log(networkError);
  });

  const client = new ApolloClient({
    link: from([middlewareLink, httpLink]),
    cache: new InMemoryCache(),
  });

  return client;
};
export default makeApolloClient;

在这里,我正在创建一个 apolloClient 并使用 asyncStorage 将身份验证数据获取到标头。

随意问任何问题

谢谢你的帮助。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM