Skip to content

Commit 3e37265

Browse files
ahuseynahuseyn
committed
implement multiple queries into starter example
1 parent 03f7079 commit 3e37265

6 files changed

Lines changed: 390 additions & 442 deletions

File tree

‎examples/next/faustwp-getting-started/fragments/LayoutQuery.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { gql } from '@apollo/client';
2+
import { BlogInfoFragment } from './GeneralSettings';
3+
import { NavigationMenu } from '../components';
4+
5+
export const GET_LAYOUT_QUERY = gql`
6+
${BlogInfoFragment}
7+
${NavigationMenu.fragments.entry}
8+
query GetLayout(
9+
$headerLocation: MenuLocationEnum
10+
$footerLocation: MenuLocationEnum
11+
) {
12+
generalSettings {
13+
...BlogInfoFragment
14+
}
15+
headerMenuItems: menuItems(where: { location: $headerLocation }) {
16+
nodes {
17+
...NavigationMenuItemFragment
18+
}
19+
}
20+
footerMenuItems: menuItems(where: { location: $footerLocation }) {
21+
nodes {
22+
...NavigationMenuItemFragment
23+
}
24+
}
25+
}
26+
`;

‎examples/next/faustwp-getting-started/wp-templates/category.js‎

Lines changed: 89 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,98 @@
11
import { gql } from '@apollo/client';
2+
import { useFaustQuery } from '@faustwp/core';
23
import * as MENUS from '../constants/menus';
3-
import { BlogInfoFragment } from '../fragments/GeneralSettings';
44
import {
5-
Header,
6-
Footer,
7-
Main,
8-
Container,
9-
EntryHeader,
10-
NavigationMenu,
11-
Post,
12-
FeaturedImage,
13-
SEO,
5+
Header,
6+
Footer,
7+
Main,
8+
Container,
9+
EntryHeader,
10+
Post,
11+
FeaturedImage,
12+
SEO,
1413
} from '../components';
14+
import { GET_LAYOUT_QUERY } from '../fragments/LayoutQuery';
15+
16+
const GET_CATEGORY_QUERY = gql`
17+
${FeaturedImage.fragments.entry}
18+
query GetCategory($uri: String!) {
19+
nodeByUri(uri: $uri) {
20+
... on Category {
21+
name
22+
posts {
23+
edges {
24+
node {
25+
id
26+
title
27+
content
28+
date
29+
uri
30+
...FeaturedImageFragment
31+
author {
32+
node {
33+
name
34+
}
35+
}
36+
}
37+
}
38+
}
39+
}
40+
}
41+
}
42+
`;
1543

1644
export default function Component(props) {
17-
const { title: siteTitle, description: siteDescription } =
18-
props?.data?.generalSettings;
19-
const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
20-
const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
21-
const { name, posts } = props.data.nodeByUri;
45+
const { generalSettings, headerMenuItems, footerMenuItems } =
46+
useFaustQuery(GET_LAYOUT_QUERY);
47+
const { nodeByUri } = useFaustQuery(GET_CATEGORY_QUERY);
2248

23-
return (
24-
<>
25-
<SEO title={siteTitle} description={siteDescription} />
26-
<Header
27-
title={siteTitle}
28-
description={siteDescription}
29-
menuItems={primaryMenu}
30-
/>
31-
<Main>
32-
<>
33-
<EntryHeader title={`Category: ${name}`} />
34-
<Container>
35-
{posts.edges.map((post) => (
36-
<Post
37-
title={post.node.title}
38-
content={post.node.content}
39-
date={post.node.date}
40-
author={post.node.author?.node.name}
41-
uri={post.node.uri}
42-
featuredImage={post.node.featuredImage?.node}
43-
/>
44-
))}
45-
</Container>
46-
</>
47-
</Main>
48-
<Footer title={siteTitle} menuItems={footerMenu} />
49-
</>
50-
);
51-
}
49+
const { title: siteTitle, description: siteDescription } = generalSettings;
50+
const primaryMenu = headerMenuItems?.nodes ?? [];
51+
const footerMenu = footerMenuItems?.nodes ?? [];
52+
const { name, posts } = nodeByUri;
5253

53-
Component.query = gql`
54-
${BlogInfoFragment}
55-
${NavigationMenu.fragments.entry}
56-
${FeaturedImage.fragments.entry}
57-
query GetCategoryPage(
58-
$uri: String!
59-
$headerLocation: MenuLocationEnum
60-
$footerLocation: MenuLocationEnum
61-
) {
62-
nodeByUri(uri: $uri) {
63-
... on Category {
64-
name
65-
posts {
66-
edges {
67-
node {
68-
id
69-
title
70-
content
71-
date
72-
uri
73-
...FeaturedImageFragment
74-
author {
75-
node {
76-
name
77-
}
78-
}
79-
}
80-
}
81-
}
82-
}
83-
}
84-
generalSettings {
85-
...BlogInfoFragment
86-
}
87-
headerMenuItems: menuItems(where: { location: $headerLocation }) {
88-
nodes {
89-
...NavigationMenuItemFragment
90-
}
91-
}
92-
footerMenuItems: menuItems(where: { location: $footerLocation }) {
93-
nodes {
94-
...NavigationMenuItemFragment
95-
}
96-
}
97-
}
98-
`;
54+
return (
55+
<>
56+
<SEO title={siteTitle} description={siteDescription} />
57+
<Header
58+
title={siteTitle}
59+
description={siteDescription}
60+
menuItems={primaryMenu}
61+
/>
62+
<Main>
63+
<>
64+
<EntryHeader title={`Category: ${name}`} />
65+
<Container>
66+
{posts.edges.map((post) => (
67+
<Post
68+
title={post.node.title}
69+
content={post.node.content}
70+
date={post.node.date}
71+
author={post.node.author?.node.name}
72+
uri={post.node.uri}
73+
featuredImage={post.node.featuredImage?.node}
74+
/>
75+
))}
76+
</Container>
77+
</>
78+
</Main>
79+
<Footer title={siteTitle} menuItems={footerMenu} />
80+
</>
81+
);
82+
}
9983

100-
Component.variables = ({ uri }) => {
101-
return {
102-
uri,
103-
headerLocation: MENUS.PRIMARY_LOCATION,
104-
footerLocation: MENUS.FOOTER_LOCATION,
105-
};
106-
};
84+
Component.queries = [
85+
{
86+
query: GET_LAYOUT_QUERY,
87+
variables: (seedNode, ctx) => ({
88+
headerLocation: MENUS.PRIMARY_LOCATION,
89+
footerLocation: MENUS.FOOTER_LOCATION,
90+
}),
91+
},
92+
{
93+
query: GET_CATEGORY_QUERY,
94+
variables: ({ uri }, ctx) => ({
95+
uri,
96+
}),
97+
},
98+
];

‎examples/next/faustwp-getting-started/wp-templates/front-page.js‎

Lines changed: 38 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,45 @@
1-
import { useQuery, gql } from '@apollo/client';
1+
import { gql } from '@apollo/client';
2+
import { useFaustQuery } from '@faustwp/core';
23
import * as MENUS from '../constants/menus';
3-
import { BlogInfoFragment } from '../fragments/GeneralSettings';
4-
import {
5-
Header,
6-
Footer,
7-
Main,
8-
Container,
9-
NavigationMenu,
10-
Hero,
11-
SEO,
12-
} from '../components';
4+
import { Header, Footer, Main, Container, Hero, SEO } from '../components';
5+
import { GET_LAYOUT_QUERY } from '../fragments/LayoutQuery';
136

147
export default function Component() {
15-
const { data } = useQuery(Component.query, {
16-
variables: Component.variables(),
17-
});
8+
const { generalSettings, headerMenuItems, footerMenuItems } =
9+
useFaustQuery(GET_LAYOUT_QUERY);
1810

19-
const { title: siteTitle, description: siteDescription } =
20-
data?.generalSettings;
21-
const primaryMenu = data?.headerMenuItems?.nodes ?? [];
22-
const footerMenu = data?.footerMenuItems?.nodes ?? [];
11+
const { title: siteTitle, description: siteDescription } = generalSettings;
12+
const primaryMenu = headerMenuItems?.nodes ?? [];
13+
const footerMenu = footerMenuItems?.nodes ?? [];
2314

24-
return (
25-
<>
26-
<SEO title={siteTitle} description={siteDescription} />
27-
<Header
28-
title={siteTitle}
29-
description={siteDescription}
30-
menuItems={primaryMenu}
31-
/>
32-
<Main>
33-
<Container>
34-
<Hero title={'Front Page'} />
35-
<div className="text-center">
36-
<p>This page is utilizing the "front-page" WordPress template.</p>
37-
<code>wp-templates/front-page.js</code>
38-
</div>
39-
</Container>
40-
</Main>
41-
<Footer title={siteTitle} menuItems={footerMenu} />
42-
</>
43-
);
15+
return (
16+
<>
17+
<SEO title={siteTitle} description={siteDescription} />
18+
<Header
19+
title={siteTitle}
20+
description={siteDescription}
21+
menuItems={primaryMenu}
22+
/>
23+
<Main>
24+
<Container>
25+
<Hero title={'Front Page'} />
26+
<div className="text-center">
27+
<p>This page is utilizing the "front-page" WordPress template.</p>
28+
<code>wp-templates/front-page.js</code>
29+
</div>
30+
</Container>
31+
</Main>
32+
<Footer title={siteTitle} menuItems={footerMenu} />
33+
</>
34+
);
4435
}
4536

46-
Component.query = gql`
47-
${BlogInfoFragment}
48-
${NavigationMenu.fragments.entry}
49-
query GetPageData(
50-
$headerLocation: MenuLocationEnum
51-
$footerLocation: MenuLocationEnum
52-
) {
53-
generalSettings {
54-
...BlogInfoFragment
55-
}
56-
headerMenuItems: menuItems(where: { location: $headerLocation }) {
57-
nodes {
58-
...NavigationMenuItemFragment
59-
}
60-
}
61-
footerMenuItems: menuItems(where: { location: $footerLocation }) {
62-
nodes {
63-
...NavigationMenuItemFragment
64-
}
65-
}
66-
}
67-
`;
68-
69-
Component.variables = () => {
70-
return {
71-
headerLocation: MENUS.PRIMARY_LOCATION,
72-
footerLocation: MENUS.FOOTER_LOCATION,
73-
};
74-
};
37+
Component.queries = [
38+
{
39+
query: GET_LAYOUT_QUERY,
40+
variables: (seedNode, ctx) => ({
41+
headerLocation: MENUS.PRIMARY_LOCATION,
42+
footerLocation: MENUS.FOOTER_LOCATION,
43+
}),
44+
},
45+
];

0 commit comments

Comments
 (0)