Skip to content

Commit 0774104

Browse files
TRomeshTRomesh
committed
Add getContentByPath query for fetching content
1 parent de7d506 commit 0774104

18 files changed

+5902
-21
lines changed

‎src/components/base/experience/blankexperience/experience.graphql.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,21 @@ export const ExperienceQuery = graphql(/* GraphQL */ `
3737
}
3838
}
3939
`);
40+
41+
export const BlankExperienceFragment = graphql(/* GraphQL */ `
42+
fragment BlankExperienceFragment on BlankExperience {
43+
composition {
44+
key
45+
displayName
46+
displayTemplateKey
47+
displaySettings {
48+
key
49+
value
50+
}
51+
sections: nodes {
52+
key
53+
...SectionNode
54+
}
55+
}
56+
}
57+
`);

‎src/components/base/experience/blankexperience/experience.template.tsx

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useQuery } from "@apollo/client";
22
import {
3+
BlankExperienceFragmentFragment,
34
CompositionDisplaySetting,
45
SectionNodeFragment,
56
} from "@generated/graphql";
@@ -9,6 +10,7 @@ import { SectionTemplate } from "../../section/section.template";
910
import { ExperienceQuery } from "./experience.graphql";
1011
import { GetExperienceStyles } from "./experience.style";
1112
import { useGlobalContext } from "@context";
13+
import { getContentByPath } from "@components/base/templates/metadata.graphql";
1214

1315
interface ExperienceTemplateProps {
1416
contentGuid?: string | null; // Content GUID
@@ -26,7 +28,6 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({
2628
}) => {
2729
const { setIsLoading } = useGlobalContext();
2830
const queryVariables = {
29-
key: contentGuid,
3031
version,
3132
locale,
3233
url,
@@ -50,22 +51,36 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({
5051
},
5152
});
5253

54+
// const { data, refetch, error, loading } = useQuery(getContentByPath, {
55+
// variables: { url: url! },
56+
// notifyOnNetworkStatusChange: true,
57+
// onError: (error) => {
58+
// console.error("[QUERY] Error fetching Experience", error);
59+
// // refetch(queryVariables);
60+
// setIsLoading(false);
61+
// },
62+
// onCompleted: (data) => {
63+
// console.log("[QUERY] Query finished with variables", {}, data);
64+
// setIsLoading(false);
65+
// },
66+
// });
67+
5368
const experience = useMemo(() => {
5469
const items = data?.content?.items;
5570
if (!data || !items || items.length === 0) {
5671
return null;
5772
}
5873

5974
return items[0];
60-
}, [data]);
75+
}, [data]) as BlankExperienceFragmentFragment;
6176

6277
useContentSaved((data) => {
6378
const [contentId, contentVersion] = data.contentLink.split("_");
6479
if (contentVersion) {
6580
queryVariables.version = contentVersion;
6681
}
6782

68-
refetch(queryVariables);
83+
// refetch(queryVariables);
6984
});
7085

7186
useEffect(() => {

‎src/components/base/page/justpage/justpage.graphql.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,13 @@ export const JustPageQuery = graphql(/* GraphQL */ `
2929
}
3030
}
3131
`);
32+
33+
export const JustPageFragment = graphql(/* GraphQL */ `
34+
fragment JustPageFragment on JustPage {
35+
Block {
36+
Text {
37+
json
38+
}
39+
}
40+
}
41+
`);

‎src/components/base/page/justpage/justpage.template.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ interface Node {
1515
children?: Node[];
1616
}
1717

18-
function extractText(node: Node): string {
18+
export function extractText(node: Node): string {
1919
if (!node) return "";
2020

2121
if (typeof node.text === "string" && node.text !== "&nbsp;") return node.text;

‎src/components/base/page/newabout/newabout.graphql.tsx renamed to ‎src/components/base/page/newabout/newabout.graphql.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,12 @@ export const NewAboutQuery = graphql(/* GraphQL */ `
2828
}
2929
}
3030
`);
31+
32+
export const NewAboutDataFragment = graphql(/* GraphQL */ `
33+
fragment NewAboutData on BlankPage {
34+
Title
35+
Block {
36+
Heading
37+
}
38+
}
39+
`);

‎src/components/base/page/newabout/newabout.template.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useQuery } from "@apollo/client";
22
import { useGlobalContext } from "@context";
33
import { NewAboutQuery } from "./newabout.graphql";
44
import { ElementTemplate } from "@components/base/element/element.template";
5-
import { ElementNodeFragment } from "@generated/graphql";
5+
import { ElementNodeFragment, NewAboutDataFragment } from "@generated/graphql";
66

77
export interface NewAboutTemplateProps {
88
contentGuid?: string | null; // Content GUID
@@ -31,21 +31,15 @@ export const NewAboutTemplate: React.FC<NewAboutTemplateProps> = ({
3131
},
3232
});
3333

34-
const title = data?.content?.items?.[0]?.Title || "No Title";
35-
const heading = data?.content?.items?.[0]?.Block?.Heading || "No Heading";
34+
const contentItem = data?.content?.items?.[0] as NewAboutDataFragment;
35+
36+
const title = contentItem?.Title || "No Title";
37+
const heading = contentItem?.Block?.Heading || "No Heading";
3638

3739
return (
3840
<article className="relative experience theme--blue">
3941
<section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
4042
<div className="opti-container__content container-narrow">
41-
{/* <ElementTemplate
42-
element={
43-
data?.content?.items?.[0]?.Block?.Heading as ElementNodeFragment
44-
}
45-
/>
46-
<ElementTemplate
47-
element={data?.content?.items?.[0]?.Title as ElementNodeFragment}
48-
/> */}
4943
<h1 className="text-red">{title}</h1>
5044
<h2>{heading}</h2>
5145
</div>

‎src/components/base/page/page1/page1.graphql.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { graphql } from "@generated/graphql/gql";
2+
3+
export const Page1Query = graphql(/* GraphQL */ `
4+
query GetPage1Page(
5+
$key: String
6+
$version: String
7+
$locale: String
8+
$url: String
9+
$status: String
10+
) {
11+
content: Page1(
12+
where: {
13+
_metadata: {
14+
url: { default: { eq: $url } }
15+
status: { eq: $status }
16+
key: { eq: $key }
17+
version: { eq: $version }
18+
locale: { eq: $locale }
19+
}
20+
}
21+
) {
22+
items {
23+
Block {
24+
Text {
25+
json
26+
}
27+
}
28+
}
29+
}
30+
}
31+
`);

‎src/components/base/page/page1/page1.template.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { useQuery } from "@apollo/client";
2+
import { useGlobalContext } from "@context";
3+
import { Page1Query } from "./page1.graphql";
4+
import { ElementTemplate } from "@components/base/element/element.template";
5+
import { ElementNodeFragment, Page1DataFragment } from "@generated/graphql";
6+
import { extractText } from "../justpage/justpage.template";
7+
import { getContentByPath } from "@components/base/templates/metadata.graphql";
8+
9+
export interface Page1TemplateProps {
10+
contentGuid?: string | null; // Content GUID
11+
version?: string | null; // Optional version
12+
locale?: string | null; // Optional locale
13+
// Or queried by just URL
14+
url?: string | null; // Matched against the URL.Default
15+
}
16+
17+
export const Page1Template: React.FC<Page1TemplateProps> = ({
18+
url,
19+
contentGuid,
20+
}) => {
21+
const { setIsLoading } = useGlobalContext();
22+
23+
// const { data, refetch, error, loading } = useQuery(Page1Query, {
24+
// variables: { url, key: contentGuid },
25+
// notifyOnNetworkStatusChange: true,
26+
// onError: (error) => {
27+
// console.error("[QUERY] Error fetching Experience", error);
28+
// // refetch(queryVariables);
29+
// },
30+
// onCompleted: (data) => {
31+
// console.log("[QUERY] Query finished with variables", {}, data);
32+
// setIsLoading(false);
33+
// },
34+
// });
35+
36+
const { data, refetch, error, loading } = useQuery(getContentByPath, {
37+
variables: { url: url! },
38+
notifyOnNetworkStatusChange: true,
39+
onError: (error) => {
40+
console.error("[QUERY] Error fetching Experience", error);
41+
// refetch(queryVariables);
42+
setIsLoading(false);
43+
},
44+
onCompleted: (data) => {
45+
console.log("[QUERY] Query finished with variables", {}, data);
46+
setIsLoading(false);
47+
},
48+
});
49+
50+
const contentItem = data?.content?.items?.[0] as Page1DataFragment;
51+
52+
const paragraph = extractText(contentItem?.Block?.Text?.json) || "";
53+
54+
return (
55+
<article className="relative experience theme--blue">
56+
<section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
57+
<div className="opti-container__content container-narrow">
58+
<p>{paragraph}</p>
59+
</div>
60+
</section>
61+
</article>
62+
);
63+
};

‎src/components/base/page/page2/page2.graphql.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { graphql } from "@generated/graphql/gql";
2+
3+
export const Page2Query = graphql(/* GraphQL */ `
4+
query GetPage2Page(
5+
$key: String
6+
$version: String
7+
$locale: String
8+
$url: String
9+
$status: String
10+
) {
11+
content: Page2(
12+
where: {
13+
_metadata: {
14+
url: { default: { eq: $url } }
15+
status: { eq: $status }
16+
key: { eq: $key }
17+
version: { eq: $version }
18+
locale: { eq: $locale }
19+
}
20+
}
21+
) {
22+
items {
23+
Block {
24+
Text {
25+
json
26+
}
27+
}
28+
}
29+
}
30+
}
31+
`);

‎src/components/base/page/page2/page2.template.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useQuery } from "@apollo/client";
2+
import { useGlobalContext } from "@context";
3+
import { Page2Query } from "./page2.graphql";
4+
import { ElementTemplate } from "@components/base/element/element.template";
5+
import { ElementNodeFragment, Page2DataFragment } from "@generated/graphql";
6+
import { extractText } from "../justpage/justpage.template";
7+
8+
export interface Page2TemplateProps {
9+
contentGuid?: string | null; // Content GUID
10+
version?: string | null; // Optional version
11+
locale?: string | null; // Optional locale
12+
// Or queried by just URL
13+
url?: string | null; // Matched against the URL.Default
14+
}
15+
16+
export const Page2Template: React.FC<Page2TemplateProps> = ({
17+
url,
18+
contentGuid,
19+
}) => {
20+
const { setIsLoading } = useGlobalContext();
21+
22+
const { data, refetch, error, loading } = useQuery(Page2Query, {
23+
variables: { url, key: contentGuid },
24+
notifyOnNetworkStatusChange: true,
25+
onError: (error) => {
26+
console.error("[QUERY] Error fetching Experience", error);
27+
// refetch(queryVariables);
28+
},
29+
onCompleted: (data) => {
30+
console.log("[QUERY] Query finished with variables", {}, data);
31+
setIsLoading(false);
32+
},
33+
});
34+
35+
const contentItem = data?.content?.items?.[0] as Page2DataFragment;
36+
37+
const paragraph = extractText(contentItem?.Block?.Text?.json) || "";
38+
39+
return (
40+
<article className="relative experience theme--blue">
41+
<section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
42+
<div className="opti-container__content container-narrow">
43+
<p>{paragraph}</p>
44+
</div>
45+
</section>
46+
</article>
47+
);
48+
};

0 commit comments

Comments
 (0)