Запросить несколько файлов JSON с помощью graphQL в Gatsby
Я пытаюсь запросить два файла JSON, которые я поместил в каталог src/data. Я установил gatsby-transformer-json и добавил каталог в качестве источника.
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/data/`
}
}
Затем я попробовал несколько способов создать запрос graphql, но я могу успешно запросить только первый файл json, который я создал work_experiences.json, который выглядит так, хотя мой второй файл skills.json имеет точно такую же структуру
{
"work_experiences": [
{
"body": "lorem ipsum",
"title": "lorem ipsum",
"role": "lorem",
"dateBegin": "2015-10-01",
"dateEnd": "2016-07-03",
"companyUrl": "http://www.lorem.com",
"workUrl": "/lorem/ipsum/"
},
...
Запрос к Skills.json всегда возвращает null.
Есть ли способ запросить оба файла или мне нужно объединить все в один файл data.json?
Можете ли вы добавить к своему вопросу файл json для навыков?
Ответы 3
Если у вас есть 2 файла в одной корневой папке и вы будете запрашивать, вы получите данные только с одного узла, потому что dataJson запрашивает один файл.
Или вы используете allDataJson вот так:
{
allDataJson{
edges{
node{
work_experiences{
title
}
skills{
name
}
}
}
}
}
в этом случае хорошее решение - хранить файлы json с одним объектом в отдельных папках, используя только один файл json на папку.
Например, у вас есть данные Users:
- создайте папку
Userв вашем src / data. - создайте файл index.json с
{ "name": "blabla" }. - запросить ваши данные.
Нравится:
{
userJson{
name
}
}
Очень подробный ответ. Поздравляю. Это был бы мой принятый ответ !! Вы сэкономили мне часы.
@aymen правильно. Затем вы можете настроить свой запрос для вызова нескольких отдельных файлов JSON:
export const pageQuery = graphql`
query indexQuery {
allSocialJson {
edges {
node {
url
type
}
}
}
allExperienceJson {
edges {
node {
id
company
title
}
}
}
allCertificationsJson {
edges {
node {
name
id
start
end
authority
}
}
}
allEducationJson {
edges {
node {
id
school
program
}
}
}
}
`
У меня была такая же проблема, и я скопировал метод @Aymen.
Я пытался загрузить несколько файлов json на свой сайт gatsby, используя два плагина ниже (gatsby-source-filesystem и gatsby-transformer-json).
Вот как настроен мой файл gatsby-config.js:
const path = require(`path`)
module.exports = {
siteMetadata: {
title: "My Homepage",
},
plugins: [
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: path.join(__dirname, `data`),
},
},
],
}
- Сначала в папке с данными я создал отдельные папки.
- Затем я добавил файл index.json в каждую из отдельных папок. Файловая структура проекта выглядит так:
src
-- data
---- folder1
------ index.json
---- folder2
------ index.json
---- folder3
------ index.json
- Затем я смог получить доступ к данным всех моих файлов index.json с помощью одного запроса:
query MyQuery {
allIndexJson {
edges {
node {
}
}
}
}
Я объединил два файла в один файл
data.json, и, похоже, он работает, хотя кажется, что это не так