getDataFromTree not working (render to Loading...)

[MaxmaxmaximusGitHub]

_app.js:

this code render

Loading...

import withApollo from 'next-with-apollo';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient, { InMemoryCache } from 'apollo-boost';
import { getDataFromTree } from '@apollo/react-ssr'


const App = ({Component, pageProps, apollo}) => (
  <ApolloProvider client={ apollo }>
    <Component { ...pageProps } />
  </ApolloProvider>
);

export default withApollo(function ({initialState}) {

  return new ApolloClient({
    uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn',
    cache: new InMemoryCache().restore(initialState || {})
  });

}, {getDataFromTree})(App, {getDataFromTree});

[thaisonnguyenbt]

I changed to use 4.3.0 and it render in server side

With 5.0.0 and 5.0.1, page is rendered at client side with "Loading..."

[vitaliemiron]

same issue, but 4.3.0 doesn't work with material ui (this bug - #60 )

[VladDubrovskis]

Had similar issue but managed to resolve/work around:
No initialState was set - this was when you install @apollo/react-ssr and @apollo/react-hooks above 3.1.3.

[vitaliemiron]

If you want to fix that you shoul import getDataFromTree
import { getDataFromTree } from '@apollo/react-ssr';

and pass it into withApollo
export default withApollo(({ initialState }) => { return new ApolloClient({ link: concat(authMiddleware, httpLink), cache: new InMemoryCache().restore(initialState || {}), }), getDataFromTree });

[eric-burel]

@VladDubrovskis can you please share a working package.json? I struggle to find the right combination

[VladDubrovskis]

@eric-burel better late than never 😂 Sorry have missed the notification:
dependencies:

"dependencies": {
    "@apollo/react-hooks": "3.1.3",
    "@apollo/react-ssr": "3.1.3",
    "@sentry/node": "^5.11.2",
    "apollo-boost": "0.4.7",
    "axios": "^0.19.0",
    "express": "^4.17.1",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.3.6",
    "next-compose-plugins": "^2.2.0",
    "next-cookies": "^2.0.3",
    "next-i18next": "^4.2.1",
    "next-with-apollo": "5.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hook-form": "^5.7.2",
  },

[acha5066]

I had the same issue. It seems like this can be caused by a number of things but it turned out that using the react-apollo library was conflicting with this library. Removing it allowed queries to be resolved on server side. Hope that helps someone!

[adithemighty]

Hi,
we had a similar issue where we would get Loading instead of the data. Our problem was that we have a custom _document.js file where we do Stylesheet related stuff. Long story short: the apolloState needs to be passed to the app in case you have a custom _document.js file.

[danielzlotnik]

We've had the same issue, consolidating all of our Apollo dependency hell onto @apollo/client (as described here), and using

import { getDataFromTree } from '@apollo/client/react/ssr';

Solved it for us.

[lakshyasharma14]

Hi, we had a similar issue where we would get Loading instead of the data. Our problem was that we have a custom _document.js file where we do Stylesheet related stuff. Long story short: the apolloState needs to be passed to the app in case you have a custom _document.js file.
@adiyathemighty Do you have any sample code for this, I am facing the same issue that AppTree is not showing the query and thus ApolloState is also null. So the client is not making any calls on the server side but doing it on client-side only.