使用 React TypeScript 进行 GraphQL 身份验证

Question

I have a login page and when the user clicks on the Submit button, I want to check authentication of the user from the data available in the GraphQL API. I tried to follow this tutorial:

https://www.apollographql.com/docs/react/networking/authentication/

On my graphQL playground, I use this mutation after which a token is returned to me.

mutation{
             loginEmail(email: "${this.state.email}",
             password: "${this.state.password}")
          }`,

However, I can just figure out how to integrate it in my code. Where exactly should I pass in the username & password? If I call _AuthLink on my button, I get overloading errors.

Here's my code for the login page:

export default class LoginPage extends Component <{}, { email: string,password: string, loggedIn: boolean}>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      email: '',
      password: '',
      loggedIn: false,
    };
  }

  _httpLink = createHttpLink({
    uri: 'https:myapilink/graphql',
  });

  _AuthLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('token');
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      }
    }
  });

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

  render() {
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div style={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'}}>
          <Avatar>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form style={{width: '100%'}} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
              onChange={e => {
                this.setState({email: e.target.value})
              }}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
              onChange={e => {
                this.setState({password: e.target.value})
            }}
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <br></br>
            <Button className='button-center'
            //onClick={this._AuthLink}
            >
            Submit</Button>
            <br></br>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2">
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Box mt={8}>
          <Copyright />
        </Box>
      </Container>
    );
  }
}

Answer 1

You need to create a mutation first! This will give you mutate function which you can pass variables and so on. Take a look at this example;

const AddTodo = () => {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = '';
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

Notice how we pass addTodo({ variables: { type: input.value } }); variables to here, you should send username and password, instead of type .

You can do something like;

login({variables: {username: this.state.username, password: this.state.password}})