Server side react-apollo wp graphql

280 Views Asked by At

I'm using ReactJS server side rendering with express and react-apollo.

Everything working perfectly until I use WP acf PRO. GraphiQL show these fields, also if I console.log it in reactjs component it shows these values in node server only not in client side. But If I remove ACF pro fields then react-apollo get everything in cient side also.

Query I use:

const TEST_DATA = gql`
  query test {
    page(id: "/homepage", idType: URI, asPreview: false) {
      homePageCustom {
        homePage {
          __typename
          ... on Page_Homepagecustom_HomePage_SomeData {
            enabled
            fieldGroupName
          }
        }
      }
    }
  }
`;

Component I use:

const FrontPage = (props) => {
  const { loading, error,  data } = useQuery(TEST_DATA, {
    fetchPolicy: 'cache-and-network',
    errorPolicy: "all",
    variables: {},
    onError: (d) => {
      console.log(d);
    },
    onCompleted: (d) => {
      console.log("onComplete", d);
    },
  });

  if (loading) return <div>...Loading</div>;
  if (error) return `Error! ${error.message}`;

  console.log("data", data, error, loading);

  return (
    <div>
     Some data here
    </div>
  );
};

export default FrontPage;

If I use that query then client side show data and working:

const TEST_DATA = gql`
      query test {
        page(id: "/homepage", idType: URI, asPreview: false) {
          homePageCustom {
            homePage {
              __typename
              ... on Page_Homepagecustom_HomePage_SomeData {
                __typename
              }
            }
          }
        }
      }
    `;

My client side settings:

const cache = new InMemoryCache();

const client = new ApolloClient({
  link: createHttpLink({ uri: webConfig.siteURLGraphQL }),
  cache: cache.restore(window.__APOLLO_STATE__),
});

const SSRApp = (
  <ApolloProvider client={client}>
    <BrowserRouter>
      <CookiesProvider>
        <App />
      </CookiesProvider>
    </BrowserRouter>
  </ApolloProvider>
);

ReactDOM.hydrate(SSRApp, document.querySelector("#root"));

Its interesting that window._ APOLLO_STATE _ get these values I need. Maybe there are some settings error in my react-apollo setup?

Im really confused and tried 3 days and nothing seems working.

0

There are 0 best solutions below