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.