设置时出现网络错误 apollo-client headers

Question

我正在使用 react-native 在 apollo-client 中设置令牌身份验证，但我的应用程序显示 NetworkError。如果我删除所有身份验证设置，它会正常工作。

这是一个带有 react-navigation、apollo-client、formik 和 yup 的本地演示应用程序。

App.js

const httpLink = new createHttpLink({
  uri: 'http://192.168.0.2/api/graphql'
});
const authLink = setContext((_, { headers }) => {
  const authToken = localStorage.getItem('authToken');
  return {
    headers: {
      ...headers,
      authorization: authToken ? `JWT ${authToken}` : '',
    }
  }
});

const APIClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

class App extends Component {
  render(){
    return (
      <ApolloProvider client={APIClient}>
        <SafeAreaView style={styles.container}>
          <AppContainer />
        </SafeAreaView>
      </ApolloProvider>
    );
  }
};

SignInScreen.js

const TOKENAUTH_MUTATION = gql`
  mutation SignIn($username: String!, $password: String!){
    tokenAuth(username: $username, password: $password){
      token
    }
  }
`;

class SignInForm extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <View style={styles.container}>
        <Text style={styles.label}>Username:</Text>
        <TextInput
          autoCapitalize='none'
          autoFocus={true}
          onBlur={this.props.handleBlur('username')}
          onChangeText={this.props.handleChange('username')}
          style={styles.textInput}
          value={this.props.values.username}
        />
        <Text style={styles.helpTextInput}>{this.props.errors.username}</Text>
        <Text style={styles.label}>Password:</Text>
        <TextInput
          onBlur={this.props.handleBlur('password')}
          onChangeText={this.props.handleChange('password')}
          secureTextEntry={true}
          style={styles.textInput}
          value={this.props.values.password}
        />
        <Text style={styles.helpTextInput}>{this.props.errors.password}</Text>
        {this.props.isSubmitting ? (
          <ActivityIndicator />
        ) : (
          <Button title="Sign In" onPress={this.props.handleSubmit} />
        )}
      </View>
    );
  }
}

class SignInScreen extends Component{

  static navigationOptions = {
    title: "Sign In"
  };

  _submit(values, actions, mutateFunc){
    mutateFunc({
      variables: values
    });
  }

  async _onSuccess(dataResult){
    await AsyncStorage.setItem('authToken', dataResult.tokenAuth.token);
    this.props.navigation.navigate('Questions');
  }

  _onError(error){
    alert("ERROR: " + JSON.stringify(error));
  }

  render(){
    const formValidationSchema = yup.object().shape({
      username: yup.string().required().label("Username"),
      password: yup.string().required().label("Password")
    });

    return(
      <Mutation
        mutation={TOKENAUTH_MUTATION}
        onCompleted={dataResult => this._onSuccess(dataResult)}
        onError={error => this._onError(error)}>
        {(signInMutationFunc, {loading, error, data}) => {
          return (
            <Formik 
              initialValues={{
                username: '',
                password: ''
              }}
              onSubmit={(values, actions) => this._submit(values, actions, signInMutationFunc)}
              validationSchema={formValidationSchema}>
              {formProps => {
                return(<SignInForm {...formProps} />);
              }}
            </Formik>
          );
        }}
      </Mutation>
    );
  }
}

我预计令牌会在 header 每个请求中存储和使用（如 Apollo 文档所说）。如果我使用基本的 ApolloClient 它可以工作但不使用 header

const APIClient = new ApolloClient({
  uri: 'http://192.168.0.2/api/graphql'
});

我在 Android 和 IOS 设备中遇到同样的错误:'(

Answer 1

好的在我的示例中，我使用的是 Apollo Boost。当我使用 Apollo Client 时它有效。

设置时出现网络错误 apollo-client headers

Getting NetworkError when setup apollo-client headers

react-native

authentication

jwt

react-apollo