Интерполяция строк в запросе graphQL
Я новичок в Gatsby и его системе запросов graphQL для извлечения активов. У меня есть рабочий компонент Image, который извлекает изображение и отображает его. Я хочу, чтобы имя изображения можно было настроить, но я не могу понять, как это сделать.
Вот рабочий компонент:
const Image = () => (
<StaticQuery
query = {graphql`
query {
// fetching the image gatsby-astronaut.png
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`}
render = {data => <Img fluid = {data.placeholderImage.childImageSharp.fluid} />}
/>
);
И вот что я пытался сделать для настраиваемого изображения:
const Image = ({ imgName }: { imgName: string }) => (
<StaticQuery
query = {graphql`
query {
// fetching the image imgName
placeholderImage: file(relativePath: { eq: "${imgName}.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`}
render = {data => <Img fluid = {data.placeholderImage.childImageSharp.fluid} />}
/>
);
Но это вызывает следующую ошибку для запроса:
Expected 1 arguments, but got 2.ts(2554)
Как я могу иметь настраиваемое имя изображения?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Проверить документы для статического запроса
StaticQuery can do most of the things that page query can, including fragments. The main differences are:
- page queries can accept variables (via pageContext) but can only be added to page components
- StaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages
Таким образом, вы можете запросить изображение GatsbyImageSharpFluid в запросе страницы и передать его в качестве гибкой опоры непосредственно в изображение Гэтсби.
Используя ответ ksav, мне удалось выполнить эту работу с помощью pageQuery и получить изображения, которые я хочу использовать на определенной странице, через реквизит.
Так:
export const pageQuery = graphql`
coverImage: file(relativePath: { eq: "coverImage.png" }) {
childImageSharp {
fluid(maxWidth: 600) {
...GatsbyImageSharpFluid_tracedSVG
}
}
}
}`
Если вы добавите это к компоненту своей страницы, вы получите реквизит coverImage с изображением coverImage.png. Надеюсь это поможет!
Вот простой способ, с которым я столкнулся:
const Image = props => {
const data = useStaticQuery(graphql`
query {
firstImg: file(relativePath: { eq: "firstImg.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
secondImg: file(
relativePath: { eq: "secondImg.png" }
) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`)
switch (props.name) {
case "firstImg":
return <Img fluid = {data.firstImg.childImageSharp.fluid} />
case "secondImg":
return <Img fluid = {data.secondImg.childImageSharp.fluid} />
default:
return <Img />
}
}
и используйте его так:
<Image name = "firstImg" />
Вы также можете сделать его безопасным для опечаток, введя объект со всеми изображениями, которые вы хотите отобразить, например:
const Images = { firstImg: 'firstImg', secondImg: 'secondImg' }
а затем используйте его следующим образом:
<Image name = {Images.firstImage} />
а также
...
switch (props.name) {
case Images.firstImage:
...
Очень удобно
Мне не удалось заставить это работать, но ваш ответ актуален. Спасибо!