React-Apollo Authentication in Next.js app - graphql

Question

I am trying to setup authentication in an app using React-Apollo and Next.js. It is setup to return a cookie containing a jwt token after sending in the credentials, which works perfectly well. When trying to run a query for the current user, it comes back as null. If I refresh the page, the query works and I get back the current user. I did notice that the cache is updated with the correct data even though the response is null.
Component:
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)))