client-side-rendering-graphql.js

// add an option to your query, which forces apollo to make the request on the client.

export default graphql(Query, {
    options: { ssr: false }
});

guard.js

// to prevent the client throwing an error while the API request is still happening, put this handy guard in before rendering the component.

export default ({ data }: any) => {
  if (data.loading) {
          return <div> loading </div>;
  }
  
  return (
    <Component />
  );
};