ApolloClient useLazyQuery 第一次调用返回 undefined

时间:2020-12-19 11:29:06

标签: react-native apollo-client

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

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 的数据。 但是当我点击时,它返回 undefined 并且它在第二次点击时起作用。

这是我的文件结构:

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

这是我的 makeApolloClient 函数:

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 将身份验证数据获取到标头。

有任何问题欢迎提问

感谢您的帮助。

0 个答案:

没有答案