设置 apollo-client 标头时出现 NetworkError

Posted 2023-03-10

【中文标题】设置 apollo-client 标头时出现 NetworkError

【英文标题】：Getting NetworkError when setup apollo-client headers

【发布时间】：2019-12-22 10:48:10

【问题描述】：

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

Error screenshot

这是一个带有 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>
    );
  

我希望令牌被存储并在每个请求的标头中使用（如 Apollo 文档所说）。 如果我使用基本的 ApolloClient 它可以工作但不使用标题

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

我在 android 和 ios 设备上遇到同样的错误 :'(

【参考方案1】：

好的 在我的示例中，我使用的是 Apollo Boost。当我使用 Apollo Client 时，它可以工作。