Next to content that's directly available to pages and sections, there will be many times when you need more data. An example could be a section that has references to another content type, but not the content itself.
Most of our CMS data is available through GraphQL, so hydrate allows you to specify queries for both page and section components. In the following examples you will see a gql util which can be found here.
import hydrate from '@dpdk/library/utilities/hydrate';
import gql from '@dpdk/library/utilities/gql';
function Home({ basic_page }) {
return <h1>GraphQL fields are mapped automatically to props</h1>;
}
Home.getQuery = ({ context }) => gql`{
basic_page(filter { language: "${context.locale}" }) {
title
}
}`;
export default hydrate(Home);
Note: In the example above you can see the getQuery is provided with the next context (with the locale).
A more advanced version of this would be a section with a reference.
import hydrate from '@dpdk/library/utilities/hydrate';
import gql from '@dpdk/library/utilities/gql';
function ReferenceSection({ content_block }) {
return <h1>The queried content block is available directly</h1>;
}
ReferenceSection.getQuery = ({ sectionData }) => gql`{
content_block(filter: { nid: "${sectionData.reference.nid}" }) {
title
}
}`;
export default ReferenceSection;
Note: Just like the section has access to the sectionData, the page has access to the pageData.
Note: If there is a conditional query (for example with a dynamic page or CMS content that's not available) you can abort the getQuery by returning
undefined.
If there's an external GraphQL API you need or want to mock the calls you can do:
// Automatic `/api/mock`
Home.mockEndpoint = true;
// External endpoint
Home.mockEndpoint = 'https://mock.dpdk.com/graphql';
There could be cases that you need REST (for example with our default search implementation). This works almost the same as GraphQL.
import hydrate from '@dpdk/library/utilities/hydrate';
function Home({ response }) {
return <h1>Notice that REST data will be mapped to `response`</h1>;
}
Home.getFetch = () => `https://mock.dpdk.com/api/basic_page?nid=0&language=en`;
export default hydrate(Home);
If you need a POST fetch it works similar:
Home.postFetch = ({ context: { query: { q }, locale } }) => [
'/api/search',
{ q, locale },
];
Note: This functionality works the same for both pages and sections.
| Last modified | Monday, August 30, 2021, 2:00:02 PM UTC |
| Last author | Colin van Eenige |
| Commit ID | fd08685 |