How to fix `Warning: Text content did not match. Server: "Some Data" Client: "Loading..."`
From react-apollo documentation, the Skipping queries for SSR section introduces a mechanism that allows developers to explicitly mark a component so that it either loads data for that component on the server or renders the component on the server in a 'loading' state.
Try the following:
// index.js<Query query={GET_USERS} ssr={false} variables={queryVariables}> {({ loading, error, data }) => { if (loading) return <p>Loading...</p>; if (error) return `Error: ${error}`; return data.users.map(user => <p key={user.id}>{user.login}</p>); }}</Query>
If using nextjs w/ styled-jsx https://github.com/vercel/styled-jsx this error can occur if you omit the jsx attribute on the style tag.
Good (jsx attribute is required):
<style jsx>{`...`}</style>Bad (omit jsx attribute):
<style>{`...`}</style>Omitting the jsx attr will throw following in browser Console:
react-dom.development.js Warning: Text content did not match. Server: "..." Client: "..."