Привет. Это продолжение моего последнего поста об использовании Gatsby.js. Я использовал Gatsby.js для создания своего портфолио по просьбе моего друга Леви Адамса.
Если вы помните из моего предыдущего поста, я только начал использовать Gatsby.js для создания своего портфолио. Единственное отличие этой публикации от моей предыдущей публикации в том, что я использовал GraphQL для отображения своих компонентов на странице. Как можно это сделать, спросите вы. Позволь мне показать тебе.
Во-первых, вы захотите добавить папку в свой текущий проект. Папку можно назвать как угодно. Далее вы создадите файл в этой папке. Вы также можете назвать этот файл как хотите. Этот проект не обошлось без некоторой помощи, поэтому я хотел бы поблагодарить John Smigla за это руководство и помощь в реализации ситуации с моим профилем.
В этом блоге я расскажу о том, как мне удалось передать информацию из GraphQL в мой проект. При первой загрузке gatsby.js вы заметите в статической папке файл с именем gatsby-config.js. В этом файле вы можете добавить свои объекты для отображения на странице. Например:
module.exports = {
siteMetadata:{
title:'ScrubHub',
description: "ScrubHub. The only way to wash your pet",
author: "riomar",
data: ["item 1", "item 2"],
person: {name: "rio", age: 42},
},
/* Your site config here */
plugins: [`gatsby-plugin-styled-components`],
Приведенный выше код показывает объект и компоненты, которые мы увидим на веб-сайте, затем вы можете перейти в папку, которую вы создали, в папке, которую вы только что создали. перейдите на страницу GraphQL, которая была создана при запуске локального хоста: обычно есть ссылка, по которой вы можете щелкнуть, чтобы перейти на сайт. После того, как вы нажмете на ссылку на сайт GraphQL, вы сможете увидеть данные, которые вы ввели в свой файл. Для своего проекта я использовал базовое имя Header.js. Я просто следил за учебником, который использовал, но вы можете назвать папку и файл как хотите. Этот файл понадобится вам позже, и я покажу вам, как его использовать.
Теперь начинается самое интересное. После того, как вы создали свой синтаксис и объекты, теперь вы можете перейти на свой сайт GraphQL и начать использовать данные, выполнив следующие действия:
- Нажмите на раскрывающееся меню сайта в проводнике.
- Нажмите на выпадающее меню siteMetadata.
- После того, как вы щелкнули раскрывающийся список siteMetadata, теперь вы можете щелкнуть все объекты, которые вы создали. Вы можете выбрать столько, сколько хотите. Я щелкнул их все, но вы можете щелкнуть сколько угодно.
Вы должны увидеть, что ваш запрос Graph QL выглядит примерно так:
query MyQuery {
site {
siteMetadata {
author
data
description
person {
age
name
}
title
}
}
}
Теперь самое интересное. После того, как вы выбрали свои запросы, теперь вы можете использовать GraphQL для получения синтаксиса, который вам понадобится для отображения вашего запроса на вашем веб-сайте.
Нажмите кнопку «Code Exporer», а затем щелкните раскрывающееся меню «Запрос страницы». Затем выберите «ловушку StaticQuery». Вы должны вернуть этот синтаксис:
export default ComponentName
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
const ComponentName = () => {
const data = useStaticQuery(graphql`
{
site {
siteMetadata {
author
data
description
person {
age
name
}
title
}
}
}
`)
return <pre>{JSON.stringify(data, null, 4)}</pre>
}
export default ComponentName
Этот синтаксис должен быть скопирован и вставлен в файл gatsby-config.js, но синтаксис, в котором он возвращает объект JS stringify, но это то, чего мы не хотим в нашем синтаксисе. Мы хотим иметь возможность отображать заголовок непосредственно из того же файла, из которого вы только что скопировали синтаксис.
Перейдите в файл Header.js или как вы его назвали, и вы можете создать свой синтаксис и объект следующим образом:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
const ComponentName = () => {
const data = useStaticQuery(graphql`
{
site {
siteMetadata {
person {
age
name
}
author
data
description
title
}
}
}
`)
return (
<div>
<h1>{data.site.siteMetadata.person.name}</h1>
<h1>{data.site.siteMetadata.person.age}</h1>
</div>
)
}
export default ComponentName
Обратите внимание, что мы убрали метод stringify и заменили его заголовком, а также вызвали объекты из приведенного выше синтаксиса? Вот как вы можете отображать объекты, добавленные в файл gasby-config.js.
Я забыл упомянуть, что также добавил файл examples.js. Вы можете назвать его как угодно, но опять же, для целей урока я использовал имя, которое использовалось в уроке. В файле example.js в папке pages вы захотите импортировать эту информацию со страницы примеров следующим образом:
import React from 'react'
import Header from '../examples/Header'
const examples = () => {
return (
<div>
<h1>This is the examples page</h1>
<Header />
</div>
)
}
export default examples
Всегда помните, когда вы создаете новую страницу или добавляете новый файл, обязательно создайте и импортируйте информацию. Например, если вы добавляете еще одну страницу с именем «Контакты», обязательно создайте файл с именем contact.js и добавьте к нему компонент, чтобы отобразить его на своем веб-сайте. То же самое можно сказать и об использовании GraphQL. Всегда помните, что ваши папки должны быть аккуратными, а ваши файлы имеют для вас смысл, чтобы при создании страницы было легче понять, какой файл что делает.
Я сделал много проектов и не совсем понял свои файловые структуры (и до сих пор иногда не понимаю), но если вы даете имена папок/файлов, которые имеют для вас смысл, и вы можете вернуться к ним в любое время, вы впереди игры.
Спасибо, что прочитали этот блог. Нажимайте «Нравится», делитесь, ставьте «большой палец вверх» или «палец вниз», и я вернусь с некоторыми дополнительными блогами, чтобы закончить эту серию. Опять же… это будет очень длинная серия блогов, поэтому я надеюсь, что вы останетесь и насладитесь моим путешествием в Гэтсби. Пожалуйста, не забудьте подписаться на некоторых из моих любимых коллег-программистов и, если хотите, на меня в Твиттере. Или нет. 😁
