Аутентификация React-Apollo в приложении Next.js - PullRequest
0 голосов
/ 30 апреля 2018

Я пытаюсь настроить аутентификацию в приложении, используя React-Apollo и Next.js. Он настроен на возвращение куки, содержащего токен jwt после отправки учетных данных, который работает отлично. При попытке выполнить запрос для текущего пользователя он возвращается как ноль. Если я обновлю страницу, запрос сработает, и я вернусь к текущему пользователю. Я заметил, что кэш обновлен с правильными данными, даже если ответ нулевой.

Компонент:

class Index extends Component{
  constructor(props){
    super(props)

    this.usernameInput = ''
    this.passwordInput = ''

    this.state = {
      error: null,
    }
  }

  getCurrentAccount = async () => {
    return await this.props.getCurrentAccount
  }

  sendCreds = async (e) => {
    e.preventDefault()

    const result = await this.props.authenticate({
      variables: {
        username: this.usernameInput,
        password: this.passwordInput,
      },
      update: (store, {data: { currentAccount } } ) => {
        const data = store.readQuery({
          query: QUERY_CURRENT_ACCOUNT,
        })
        console.log('after authenitcation', data)
      }
    })

    if (result.error) {
      console.log('error on authentication', result.error)
      this.setState({error: 'There was an error with our server.'})
    } else if (result) {

      //this.login()
    }
  }

  login = async () => {
    const data = await this.getCurrentAccount()

    if (data.error) {
      console.log('error on fetching account', data.error)
      this.setState({error: 'There was an error with our server.'})
    } else if (data.currentAccount.role) {
      Router.push('/dashboard')
    } else {
      this.setState({error: 'The ID or password you entered is incorrect.'})
    }
  }

  render() {
    return (
        <form onSubmit={this.sendCreds}>
          { this.state.error ? <FormError>{this.state.error}</FormError> : null}
          <fieldset>
            <InputField id="username" label="usrname" placeholder="username" pattern="^[a-zA-Z0-9_]*$" required inputValue={val=>this.usernameInput = val}/>
            <InputField id="password" type="password" label="Password" placeholder="Password" required inputValue={val=>this.passwordInput = val}/>
          </fieldset>
          <ButtonPrimary type="submit" label="Send Credentials" width="full"/>
          <ButtonPrimary label="Get Current User to Login" width="full" clickAction={()=>this.login()}/>
          <footer>
            <Link href="forgot-username">
              <a>Forgot my username</a>
            </Link>
            <Link href="forgot-password">
              <a>Forgot my password</a>
            </Link>
          </footer>
        </form>
  )}
}

GrahpQL:

const MUTATION_AUTH = gql`
  mutation authenticate($username: String!, $password: String!) {
    authenticate(input: {
        username: $username,
        password: $password
    }) {
      jwtToken
    }
  }
`

const QUERY_CURRENT_ACCOUNT = gql`
   {
    currentAccount {
      account {
        firstName
        profileImageUrl
      }
      role
    }
  }
`

export default withData(compose(
  graphql(MUTATION_AUTH, { name: 'authenticate' }),
  graphql(QUERY_CURRENT_ACCOUNT, { name: 'getCurrentAccount'} )
)
(withApollo(Index)))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...