How to use GraphQL queried data in SSR rendered html.js?
#38930
-
|
We are using Strapi as CMS, and Gatsby as static site generator, all HTMLs, JS, CSS, images and other resources will be packaged and deployed independently from the original CMS, as a static site. We use React and GraphQL static queries already for client components. Now I want to add custom (global) stylesheets which can be maintained in a CMS (Strapi) which is renderend on build time into the HTML. We have our custom import React from "react"
import PropTypes from "prop-types"
import SsrCustomStyles from "./ssr/SsrCustomStyles"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
...
{props.headComponents}
<SsrCustomStyles />
</head>
<body {...props.bodyAttributes}>
....In How do I fetch data with GraphQL at build time in a component included in What I tried:
Variable
Doesn't build, I get following error:
An example for the latter case: export default function SsrCustomStyles({ data }) {
return (
<StaticQuery query={query} render={data => {
const settings = data.allStrapiAppSettings.nodes[0]
const files = data.allCssFiles.nodes[0]
return <>
{getStyleSheets(settings, files).map(
({ id, href }) => <StyleSheet key={id} id={id} href={href} />
)}
</> }
} />
)
}
export const query = graphql`
query {
allStrapiAppSettings { nodes { ... } }
allCssFiles: allFile(filter: {extension: {in: ["css"]}}) { nodes { ... } }
}
` |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
Hi Paul, Using As mention in Gatsby Head Api Doc :
I think this is the best option in Gatsby. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I didn't mention that |
Beta Was this translation helpful? Give feedback.
-
|
Also, I've seen a |
Beta Was this translation helpful? Give feedback.
-
Thanks, I'll look into it and try again. The documentation you quoted:
That would be against this advice, correct?
This is a component switching between |
Beta Was this translation helpful? Give feedback.
-
|
Have you try to use Head Api ? I show you an example, using bootstrap css cdn, and a simple static query as a Proof of Concept… First, create a import React from "react";
import {graphql, HeadProps, useStaticQuery} from "gatsby";
export type DefaultHead<DataType = object, PageContextType = object> = (
props: HeadProps<DataType, PageContextType> & { title?: string }
) => JSX.Element
const DefaultHead: DefaultHead<any,any> = (props) => {
const { site: { siteMetadata } } = useStaticQuery(graphql`
query DefaultHead {
site {
siteMetadata {
title
}
}
}`);
const { title = siteMetadata.title || "Default Title" } = props;
return (<>
<link href={"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"} rel={"stylesheet"} />
<title>{title}</title>
</>);
}
export default DefaultHead;Then, in all of your page components, using Gatsby Head Api, add something like this without flickering in my browser… export const Head: HeadFC = (props) => <DefaultHead {...props} />in my static html generated at build time, I have following lines: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" data-gatsby-head="true"/>
<title data-gatsby-head="true">my site title from GraphQL</title>in this sample, the CSS url is static, but you can use any graphql result as source of data. |
Beta Was this translation helpful? Give feedback.
-
|
@violy Thank you very much! Trying your solution I had a deeper look at my project. I was already using The flickering (and not always correct rendering) only happens in the preview, when running So it works all fine, and I did not have to change anything. Sorry for the confusion -- and sorry for the question at all. Nevertheless it helped me a ton to understand more about the rendering process, the APIs, and so on. So thank you so much! 🙏 |
Beta Was this translation helpful? Give feedback.
Have you try to use Head Api ?
I show you an example, using bootstrap css cdn, and a simple static query as a Proof of Concept…
First, create a
DefaultHeadcomponent, like this