Gatsby: Gatsby SSR fail with apollo client, also generates hydration problems

Created on 20 Aug 2020 · 2Comments · Source: gatsbyjs/gatsby

Description

I'm setting apollo client for using on hybrid app as described here.
I've manage to create the private route with a normal react app so far, but I realized I started having hydration problems:
Elements on the DOM appear with a different classname, even classnames from other components. They appear in different position causing it to look REMOTELY DIFFERENT from the development version.

I workarounded this by creating a component (That I named ProtectBuild to prevent the SSR of basically the whole appliction, even the pages that didn't have dynamic data.
This actually works well but basically is the same as having a pure react app with the benefit of having the data on the components without the need of fetching. Still is better but it's not the desired behaviour.

Steps to reproduce

Set a private route on gatsby-node and create the page on :
gatsby-node.js

module.exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;
  if (page.path.match(/^\/account/)) {
    page.matchPath = '/account/*';
    createPage(page);
  }
};
````
Set a SSR preventer:

import React from 'react';
import PropTypes from 'prop-types';

const ProtectBuild = ({ children }) => {
if (typeof window !== 'undefined') {
return <>{children};
} else {
return <>;
}
};

ProtectBuild.propTypes = {
children: PropTypes.any,
};

export default ProtectBuild;


src/pages/account: this is my react Index with reach/router.

import React from 'react';
import ProtectBuild from '../components/utils/protectBuild';
import Routes from '../components/pages/app/routes';

const Account = () => {
return (

);
};

export default Account;

2. Set @apollo/client
client.js

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import { someFunction } from './someValidations';

export const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: https://endpoint/graphql/,
fetchOptions: {
mode: 'cors',
credentials: 'include',
},
}),
resolvers: {
Query: {
isLoggedIn() {
return !!someFunction();
},
},
},
});

3. Set apollo provider:
wrap-root-element.js

import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { client } from './client';

export const wrapRootElement = ({ element }) => (
{element}

);
wrapRootElement.propTypes = {
element: PropTypes.object,
};

4. set gatsby-browser.js and gatsby-ssr.js:

import React from 'react';
import Layout from './src/components/layout/layout';
import PropTypes from 'prop-types';
export { wrapRootElement } from './src/state/wrap-root-element';

export const wrapPageElement = ({ element, props }) => {
return ;
};

wrapPageElement.propTypes = {
element: PropTypes.element,
props: PropTypes.any,
};



### Expected result

1. First of all, that the build runs without errors.
2. Have a normal JAM page served in the initial rendered, with every component with right name, styles and position.

### Actual result

$ gatsby clean && env-cmd -f .env gatsby build
info Deleting .cache, public,
info Successfully deleted directories
success open and validate gatsby-configs - 0.023s
success load plugins - 0.344s
success onPreInit - 0.063s
success delete html and css files from previous builds - 0.006s
success initialize cache - 0.007s
success copy gatsby files - 0.023s
success onPreBootstrap - 0.006s
success createSchemaCustomization - 0.007s

fetch all Airtable rows from 1 tables: 600.840ms
success Checking for changed pages - 0.004s
success source and transform nodes - 1.126s
success building schema - 0.297s
success createPages - 0.046s
success Checking for changed pages - 0.002s
success createPagesStatefully - 0.056s
success update schema - 0.025s
success onPreExtractQueries - 0.001s
success extract queries from components - 1.537s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.067s
success onPostBootstrap - 0.071s
info bootstrap finished - 6.082s
success run static queries - 0.127s - 3/3 23.58/s
success run page queries - 0.150s - 7/7 46.69/s
success write out requires - 0.004s
success Building production JavaScript and CSS bundles - 27.923s
success Rewriting compilation hashes - 0.002s
failed Building static HTML for pages - 6.325s

ERROR #95313

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

10 | function InvariantError(message) {
11 | if (message === void 0) { message = genericMessage; }

12 | var _this = _super.call(this, typeof message === "number"
| ^
13 | ? genericMessage + ": " + message + " (see https://github.com/apollographql/invariant-packages)"
14 | : message) || this;
15 | _this.framesToPop = 1;

WebpackError: Invariant Violation: Invariant Violation: 23 (see https://github.com/apollog raphql/invariant-packages)

invariant.esm.js:12
node_modules/ts-invariant/lib/invariant.esm.js:12:1
checkFetcher.js:4
node_modules/@apollo/client/link/http/checkFetcher.js:4:52
createHttpLink.js:15
node_modules/@apollo/client/link/http/createHttpLink.js:15:17
HttpLink.js:8
node_modules/@apollo/client/link/http/HttpLink.js:8:53
client.js:6
src/state/client.js:6:9
wrap-root-element.js:1
src/state/wrap-root-element.js:1:1
gatsby-ssr.js:1
gatsby-ssr.js:1:1


### Environment

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 5.0.16 - /bin/bash
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 76.0.1
  npmPackages:
    gatsby: ^2.21.0 => 2.24.47 
    gatsby-cli: ^2.12.87 => 2.12.87 
    gatsby-image: ^2.4.0 => 2.4.16 
    gatsby-plugin-manifest: ^2.4.0 => 2.4.23 
    gatsby-plugin-offline: ^3.2.0 => 3.2.23 
    gatsby-plugin-react-helmet: ^3.3.0 => 3.3.10 
    gatsby-plugin-sass: ^2.3.12 => 2.3.12 
    gatsby-plugin-sharp: ^2.6.0 => 2.6.27 
    gatsby-source-airtable: ^2.1.1 => 2.1.1 
    gatsby-source-filesystem: ^2.3.0 => 2.3.24 
    gatsby-source-graphql: ^2.6.2 => 2.7.1 
    gatsby-transformer-sharp: ^2.5.0 => 2.5.13 
  npmGlobalPackages:
    gatsby-cli: 2.12.26

## My package.json:

{
"name": "name",
"private": true,
"description": "desc",
"version": "0.1.0",
"author": "Javier ",
"dependencies": {
"@apollo/client": "^3.0.2",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@n8tb1t/use-scroll-position": "^1.0.43",
"autosuggest-highlight": "^3.1.1",
"gatsby": "^2.21.0",
"gatsby-cli": "^2.12.87",
"gatsby-image": "^2.4.0",
"gatsby-plugin-manifest": "^2.4.0",
"gatsby-plugin-offline": "^3.2.0",
"gatsby-plugin-react-helmet": "^3.3.0",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.0",
"gatsby-source-airtable": "^2.1.1",
"gatsby-source-filesystem": "^2.3.0",
"gatsby-source-graphql": "^2.6.2",
"gatsby-transformer-sharp": "^2.5.0",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.12.0",
"react-helmet": "^6.0.0"
},
"devDependencies": {
"env-cmd": "^10.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "2.0.5"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"local-build": "gatsby clean && env-cmd -f .env gatsby build",
"develop": "env-cmd -f .env gatsby develop -H 0.0.0.0 -p 5000",
"sstart": "env-cmd -f .env gatsby develop -p 5000 --https -c ./.certs/server.crt -k ./.certs/server.key",
"format": "prettier --write \"*/.{js,jsx,json,md}\"",
"start": "yarn develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
```