Next.js redirect inside of GraphQL mutation - reactjs

Question

In my Next.js component I made a mutation request to GraphQL server and after it successfully done I need to redirect to another page. How I do it now:
import React, { Component } from 'react';
import Router from 'next/router';
import { Mutation } from 'react-apollo';
import { gql } from 'apollo-boost';
const signInMutation = gql`
mutation signIn($accessToken: String!) {
signIn(accessToken: $accessToken)
}
`;
export default class extends Component {
static async getInitialProps({ query: { accessToken } }) {
return { accessToken };
}
render() {
const { accessToken } = this.props;
return (
<Mutation mutation={signInMutation} ignoreResults>
{signIn => {
signIn({ variables: { accessToken } }).then(() => {
Router.push({
pathname: '/user'
});
});
return null;
}}
</Mutation>
);
}
}
It works fine but Next.js throws an error: You should only use "next/router" inside the client side of your app.. So, what is the best way to fix the error?

Answer 1

Your signIn mutation is executed on render, and when NextJS renders your app on the server side, executes your mutation.
You should render a button and only trigger the mutation on click:
import React, { Component } from 'react';
import Router from 'next/router';
import { Mutation } from 'react-apollo';
import { gql } from 'apollo-boost';
const signInMutation = gql`
mutation signIn($accessToken: String!) {
signIn(accessToken: $accessToken)
}
`;
export default class extends Component {
static async getInitialProps({ query: { accessToken } }) {
return { accessToken };
}
render() {
const { accessToken } = this.props;
return (
<Mutation mutation={signInMutation} ignoreResults>
{signIn => {
return (
<button onClick={async () => {
await signIn({ variables: { accessToken } })
Router.push({ pathname: '/user' })
}}>Login</button>
)
}}
</Mutation>
);
}
}