I am using GraphQL CDA on the frontend. And I am using GraphQL fragments on the blocks field of Structured Text and it is working great.
Now, I enabled linking of inline records in Structured Text and I am fetching links fields like this:
query getSingleCoursePage($slug: String!) {
course(filter: { slug: { eq: $slug } }) {
id
slug
pageContent {
blocks {
...FAQCollectionBlockFields
...SplitPaneBlockFields
# trimmed for brevity
}
links {
... on CourseOverviewPageRecord {
id
_modelApiKey
slug
}
... on AboutPageRecord {
id
_modelApiKey
}
# trimmed for brevity
}
value
}
}
And Iām using Structured Text on multiple other places in the project. Another example is:
fragment BrownSplitPaneBlockFields on BrownSplitPaneRecord {
id
_modelApiKey
leftSection {
blocks {
...FAQCollectionBlockFields
}
links
value
}
rightSection {
blocks {
...FAQCollectionBlockFields
}
links {
... on CourseOverviewPageRecord {
id
_modelApiKey
slug
}
... on AboutPageRecord {
id
_modelApiKey
}
# trimmed for brevity
}
value
}
}
As you see that Iām repeating the code in the links field of Structured Text.
So, my question is how can I fetch this data without repeating code?
PS: I need this links query on at least 10 other places in my codebase.
query getSingleCoursePage {
course {
id
slug
pageContent {
...pageContentFragment
}
}
}
fragment pageContentFragment on CourseModelPageContentField {
links {
... on CourseOverviewPageRecord {
id
_modelApiKey
slug
}
... on AboutPageRecord {
id
_modelApiKey
}
}
value
}
If you donāt know the type of a parent field, you can just hover it on our query explorer, and you will see its type name right away:
Thank you so much for providing me the code snippet.
It definitely helped a lot.
But it doesnāt solve the problem fully.
On the Fragment definition, we write āon CourseModelPageContentFieldā - it works when we use it on pageContent - but it doesnāt work when we use it on BrownSplitPaneRecord - because we have hard coded type CourseModelPageContentField on fragment definition.
In that case due to the type safety it is not possible unfortunately to re-use the same fragment on two different models of two different types at the moment
So the same fragment would have to be duplicated with a āon BrownSplitPaneRecordā and another with āon CourseModelPageContentFieldā
Iām just pasting my temporary solution below that can be useful for future readers.
Iāve created a file called fragments.js - and Iāve declared these fragments there.
import { gql } from 'graphql-request';
export const COURSE_OVERVIEW_PAGE_LINK_FIELDS = gql`
fragment CourseOverviewPageLinkFields on CourseOverviewPageRecord {
id
_modelApiKey
slug
}
`;
export const ABOUT_PAGE_LINK_FIELDS = gql`
fragment AboutPageLinkFields on AboutPageRecord {
id
_modelApiKey
}
`;
And I am using it like this on queries.
query getSingleCoursePage($slug: String!) {
course(filter: { slug: { eq: $slug } }) {
id
slug
pageContent {
blocks {
...FAQCollectionBlockFields
...SplitPaneBlockFields
# trimmed for brevity
}
links {
...CourseOverviewPageLinkFields
...AboutPageLinkFields
# trimmed for brevity
}
value
}
}
And please donāt forget to import those fragments in the file where you are writing this query.
And add fragments like these on the end of graphql-reuqest query.