ããã°ãã³ã³ãã³ãããååŸããããšããŠããŸãããå¥åŠãªãšã©ãŒãçºçããŸãã
ç§ããã®åé¡ãéããŠããå¯äžã®çç±ã¯ããšã©ãŒãç§ã«ããããããã«èšã£ãããã§ãã
ããã¯ãšã©ãŒãèšã£ãããšã§ãïŒ
ãšã©ãŒïŒãã®StaticQueryã®çµæããã§ããã§ããŸããã§ããã
ãããã¯Gatsbyã®ãã°ã§ããå¯èœæ§ããããŸããããŒãžãæŽæ°ããŠãä¿®æ£ãããªãå Žåã¯ã httpsïŒ//github.com/gatsbyjs/gatsby/issuesã§åé¡ãéããŠ
gatsbyæ å ±åºåïŒ
ã·ã¹ãã ïŒ
OSïŒWindows 10
CPUïŒïŒ8ïŒx64 IntelïŒRïŒCoreïŒTMïŒi7-3632QM CPU @ 2.20GHz
ãã€ããªïŒ
npmïŒ6.9.0-CïŒ\ Program Files \ nodejs \ npm.CMD
èšèªïŒ
PythonïŒ3.7.2
ãã©ãŠã¶ïŒ
ãšããžïŒ44.18362.1.0
npmPackagesïŒ
ã®ã£ãããŒïŒ^ 2.13.51 => 2.13.51
gatsby-plugin-sassïŒ^ 2.1.4 => 2.1.4
gatsby-plugin-sharpïŒ^ 2.2.10 => 2.2.10
gatsby-remark-imagesïŒ^ 3.1.7 => 3.1.7
gatsby-remark-relative-imagesïŒ^ 0.2.3 => 0.2.3
gatsby-source-contentfulïŒ^ 2.1.18 => 2.1.18
gatsby-source-filesystemïŒ^ 2.1.9 => 2.1.9
gatsby-transformer-åèïŒ^ 2.6.11 => 2.6.11
ãšã©ãŒæªåŠçã®æåŠ
ãšã©ãŒïŒã·ã¹ãã ã¯æå®ããããã¹ãèŠã€ããããšãã§ããŸããã
envinfo.jsïŒ1 Function.e.exports.sync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:4908
envinfo.jsïŒ1 Object.copySync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:66886
envinfo.jsïŒ1 Object.t.writeSync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:48715
envinfo.jsïŒ1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46872
envinfo.jsïŒ1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46887
task_queues.jsïŒ88 processTicksAndRejections
internal / process / task_queues.jsïŒ88ïŒ5
ããã«ã¡ã¯@ EdinK1 ããã®ã³ãŒãããŒã¹ã®ãªããžããªãå ±æããŠããã ããã°ãããã«æ·±ãæãäžããŠããã®ãšã©ãŒã衚瀺ãããåå ãå ·äœçã«ç¹å®ã§ããŸãã ããã§ãªãå Žåã¯ããããè€è£œã§ããŸããïŒ
ããã«ã¡ã¯@lannonbr ã 確ãã«ããã«ç§ã®ãªããžããªãžã®ãªã³ã¯ããããŸãã åé¡ã¯ãgatsbty-source-contenfulãã©ã«ããŒã®fragments.jsã«ããããã§ãã ããŒãã¢ãžã¥ãŒã«ãã©ã«ããgitignoredããŸããã ããŒãã¢ãžã¥ãŒã«ã確èªããå¿ èŠãããå Žåã¯ãç¥ãããã ããã
ç§ããã®ãšã©ãŒãçºçããŸããã ãã®ãã¥ãŒããªã¢ã«https://www.youtube.com/watch?v=8t0vNu2fCCM&t=13486sããã©ããŒããŠããŸããããblog.jsã«ã¯ãšãªãè¿œå ããããšãããšããšã©ãŒãçºçããŸããã å¥åŠãªããšã«ã以åã¯graphiã§æ©èœããŠããŸããã
https://itnext.io/content-management-with-gatsby-netlify-and-contentful-70f03de41602ããã©ããŒããŠãããšãã«ããã®ãšã©ãŒãåçŸã§ã
node_modules / gatsby-source-contentful / sec / Fragments.jsãåé€ãããšããšã©ãŒããä¿®æ£ããããããã§ãã
ããŒãããããããã¯ç§ã«ãšã£ãŠãããŸããããŸããã ãããæ£ããæ¹æ³ãã©ããã¯ããããŸãããããšã«ããæè¬ããŸãïŒ
åæ§ã®ãšã©ãŒãçºçããŸãããã©ã°ã¡ã³ããã¡ã€ã«ã®åé€ãæ©èœããŸããã 誰ãããŸã 解決çãèŠã€ããŸãããïŒ
ãã©ã°ã¡ã³ããã¡ã€ã«ãåé€ãããšãããŸãããã¯ãã§ãã ãµãŒããŒãåèµ·åããŠã¿ãŠãã ããã
ããããšãããããŸãããã©ã°ã¡ã³ããã¡ã€ã«ãåé€ããããšã§æ©èœããŸããããå®éã®è§£æ±ºçãšããããã¯åé¿çã®ããã§ãã 誰ãããããæ·±ãæãäžããŸãããïŒ
ããã§åãåé¡ãã³ã³ãã³ãã®å€ãç»åã®åé¡ãèŠã€ããããšãã§ããŸãã
export const mainQuery = graphql`
query {
contents: allContentfulContents {
edges {
node {
slug
title
content {
json
}
cover {
fluid {
...GatsbyContentfulFluid_noBase64
}
}
gallery {
id
fluid {
src
}
}
}
}
}
}
`
å 容ã®å€ããã©ã°ã¡ã³ãããã¹ãŠè©ŠããŸããããã©ããæ©èœããŸããã
export const query = graphql`
query {
contentfulBlogPost {
title
publishedDate
body {
json
}
}
}
`
ããã¯ãã³ã³ãã³ãã®å€ãããã°ã®ãã¹ãŠã®ç»åãšã³ã³ãã³ããããå Žæã ãšæããŸãã ïŒbody {json}ïŒ
æŽæ°ïŒgatsby-source-contentfulãæŽæ°ããåŸããã°ã¯ãªããªã£ãããã§ããå°ãªããšããä»ã¯ç»åãååŸããŠããŸãã ãããã以åã¯åããšã©ãŒã¡ãã»ãŒãžã衚瀺ãããŸãããããã®ãšã©ãŒã¯ããããGatsbyããã®ãã®ã§ããããã®ãšã©ãŒã«ã€ããŠgithubã«æçš¿ããå¿ èŠããããŸãã
ç§ã¯åãåé¡ãæ±ããŠããŸãã
[email protected]
[email protected]
[email protected] ïŒå€ãããŒãžã§ã³ãè©ŠããŸããããåãåé¡ã§ãïŒ
ç§ã¯ãã®ãããªgatsbyãããžã§ã¯ããäœæããŸããïŒ
gatsby new great_gatsby_bootcamp https://github.com/gatsbyjs/gatsby-starter-hello-world
[email protected]
ãã€ã³ã¹ããŒã«ããenvãã»ããã¢ããããŸããã ã®ãããªå€æ°ã¯ãREADME.mdã§èª¬æãããŠããŸãã
ããã€ãã®åçŽãªã³ã³ãã³ãã¢ãã«ãäœæããŸããïŒ
ãããŠãããã€ãã®ã³ã³ãã³ããäœæãã gatsby develop
å®è¡ããåŸã次ã®ãšã©ãŒãçºçããŸãã
output.txt
ç¹å¥ãªããšã¯äœããããŸãããã»ãšãã©ããã©ã«ãã®æ§æã§ãã
localhostïŒ8000ã®Reactã¢ããªã±ãŒã·ã§ã³ãæ©èœããŸãããgraphqlplaygroundã§ã³ã³ãã³ããã¯ãšãªã§ããŸãã
åãåé¡ãçºçããå Žåã¯ãgatsby-source-contentfulãããŒãžã§ã³2.1.19ã«åã€ã³ã¹ããŒã«ããŠã¿ãŠãã ããã
npm install --save gatsby-source-contentful
åã€ã³ã¹ããŒã«ããŠã¿ãŸããããããŸããããŸããã§ããã ãšã©ãŒãšããããã¯ãã°ãããŒãžã§ã³ã®è¡çªã ãšæããŸã
åã€ã³ã¹ããŒã«ããŠã¿ãŸããããããŸããããŸããã§ããã ãšã©ãŒãšããããã¯ãã°ãããŒãžã§ã³ã®è¡çªã ãšæããŸã
ç§ã¯æ¬¡ã®æé ãå®è¡ããŸããïŒ
fragments.js
ãåé€ããŸããnpm run clean
gatsby develop
è©ŠããŸãããããšã©ãŒãçºçããŸããïŒä»ã®ãã©ãŒã©ã ã§ã¯ããã®ã¹ãããã§ãã°ãä¿®æ£ã§ãã人ãããŸãïŒnpm install --save gatsby-source-contentful
npm run clean
gatsby develop
ãšæå-ãã®æ©èœãnpm i [email protected] [email protected]
ãããŠã³ã°ã¬ãŒãããŸãã
ã³ã³ãã³ããã«ã®ã¡ãã£ã¢ãã¡ã€ã«ã«ç»åãè¿œå ããŸãã ãããŠãæçš¿å ã®ç»åãè©ŠããŠãã ããã ç§ã«ãšã£ãŠãã®ä¿®æ£ãããåé¡ã ã©ã®ããã«ãããŠãªãç§ã¯ããããããŸããã
åããšã©ãŒãçºçããå Žåã¯ã次ã®æé ãå®è¡ããŠãããŒã¿ãåé€ãããããã±ãŒãžãããŠã³ã°ã¬ãŒããããããã«è§£æ±ºããŸããã
npm run develop
ãŸãã¯gatsby develop
å®è¡ããŠãéçºãµãŒããŒãåèµ·åããŸãããŸãããã°ãããã¯ããªãã®åé¡ã解決ããŸããã誰ããç§ãã¡ã«ãããäºå®ã§ããçç±ãæããŠããããªãããã¯åœ¹ã«ç«ã€ãããããŸããã
ç»åã®è¿œå ã圹ç«ã¡ãŸãããç»åãå ¬éããå¿ èŠããããŸã
ç§ã¯ãŸã ãã®åé¡ãæ±ããŠããŸãã æšæ¥ããã¬ãŒã¹ãã«ããŒç»åãã¢ããããŒããããšãã«æ©èœããŸããããåããã¥ãŒããªã¢ã«ãé²ãããšæ©èœããªããªããŸããã
ä»ãç§ã¯fragment.jsãåé€ããŸããïŒå®éã«ã¯ãããŒã¿ã®æ倱ãé¿ããããã«ããã¡ã€ã«å
šäœãã³ã¡ã³ãã¢ãŠãããã ãã§ãïŒãåã³æ£åžžã«åäœããŸãã
åãåé¡ããããŸãã Fragments.jsã®åé€-圹ã«ç«ã¡ãŸããã
Fragments.jsãã¡ã€ã«ãåé€ãããšããšã©ãŒãåãé€ãããšãã§ããŸããã ãããé©åãªè§£æ±ºçãã©ããã¯ããããŸãããã
ãããã©ã®ããã«æ©èœãããã«ã€ããŠã¯ãŸã æ··ä¹±ããŠããŸãã
åãåé¡ããããŸãã [ã¡ãã£ã¢]ã¿ãã«ãããŒç»åãè¿œå ãããšãåé¡ãä¿®æ£ãããŸãã
ç»åãã¬ãŒã¹ãã«ããŒã®è¿œå ã¯ç§ã®ããã«åãã
[email protected]
ãã®åé¡ãä¿®æ£ããããã©ããã確èªã§ããŸããã @froddã¯ã圌ã®ä¿®æ£ãé¢é£ããŠããå¯èœæ§ããããšèãããããããŸããã
ç§ã¯ããããã¹ãããŸãããç§ã¯æºè¶³ã®ãã2ã€ã®ã¹ããŒã¹ããäœæã§ãããçŸåšäž¡æ¹ã䜿çšããŠããŸãïŒ/ããããã®ããããåé€ã§ããŸãããããããã¹ãã§ããä»ã®è¯ãåŠç²Ÿã§ããïŒ ïŒïŒ THX
ãããç§ã¯fragment.jsã®ãã¹ãŠã®ã³ã³ãã³ããåé€ããã ãã§ããã解決ããŸããããä»ã«ã¯äœããããŸããã§ããããã¡ã€ã«ãåé€ãããšãã«æ©èœãããã³ã³ãã³ãã ããæ©èœããŸããã
Fragments.jsãåé€ãããšåé¡ã解決ããŸããããããã¯çæ³çãªè§£æ±ºçãšã¯æããŸããã Fragments.jsãã¡ã€ã«ã¯ã©ãã§äœ¿çšãããŸããïŒ
ã³ã³ãã³ããã«ã®ã¡ãã£ã¢ãã¡ã€ã«ã«ç»åãè¿œå ããŸãã ãããŠãæçš¿å ã®ç»åãè©ŠããŠãã ããã ç§ã«ãšã£ãŠãã®ä¿®æ£ãããåé¡ã ã©ã®ããã«ãããŠãªãç§ã¯ããããããŸããã
ç§ã«ãå¹ã
@dreilacadinã«æè¬ããŸããã¡ãã£ã¢ã«ç»åãè¿œå ãããšãç§ãåé¡ã解決ããŸããã
æ°èŠã€ã³ã¹ããŒã«ãå®è¡ããŸãããããã®åé¡ã¯åŒãç¶ãçºçããŠããŸãã 確ãã«ãã°ã§ããïŒ
æ°èŠã€ã³ã¹ããŒã«ãå®è¡ããŸãããããã®åé¡ã¯åŒãç¶ãçºçããŠããŸãã 確ãã«ãã°ã§ããïŒ
@wardpeetããã§ã¯ãªãã£ãããã§ã
Fragments.jsã®ã³ã³ãã³ããåé€ãããšãç§ãåé¡ã解決ããŸããã
ã¡ãã£ã¢ã«ç»åãè¿œå ããããªãã¯ã§åé¡ãä¿®æ£ãããŸããã ãããããªãããããã®ããã«æ©èœããã®ã§ããïŒ
éçºçšã«ä¿®æ£ãããfragments.jsã®åé€ã ãã ããNetlifyãã«ãã§ã¯ä¿®æ£ãããŸããã§ããã ããããã¡ãã£ã¢ãè¿œå ããããšã¯ããŸããã ãªããŠã©ã³ãã ãªãä¿®æ£ãã
ãŸãã[ã¡ãã£ã¢]ã¿ãã«ãã¬ãŒã¹ãã«ããŒç»åãè¿œå ããŸããããããã§ããŸããããŸããã
ãã¬ãŒã¹ãã«ããŒç»åãè¿œå ããåé¡ãä¿®æ£ããŸããã
ãã¬ãŒã¹ãã«ããŒç»åãè¿œå ããããšãç§ã®ããã«åãã
ãã¬ãŒã¹ãã«ããŒç»åãè¿œå ãããšããã®åé¡ãä¿®æ£ãããããšã確èªã§ããŸã
ïŒå ¬éãããïŒïŒãã¬ãŒã¹ãã«ããŒç»åãè¿œå ããããšãç§ã«ãšã£ãŠã¯ããŸããããŸããã
Contentfulã«å°ãªããšã1ã€ã®ã¡ãã£ã¢ã¢ã»ãããããããšãåé¡ã®ããã§ãã ãã®ãã£ãŒã«ãã®æ¬ èœã蚱容ããããã«ã³ãŒããå€æŽã§ããŸããïŒ
äžèšã®äººãšåããã¥ãŒããªã¢ã«ã«åŸã£ããšæããŸãïŒAndrewMeadæ°ã«ãããTheGreatGatsby Bootcamp-Full Gatsby.js Tutorial CourseããhttpsïŒ//www.youtube.com/watchïŒv = kzWIUX3CpuIïŒ
åé¡ã¯ãŸã ååšããŠããã /gatsby-source-contentful/src/
ãã£ã¬ã¯ããªã®fragment.js
ã®å
容ãåé€ããããšã§è§£æ±ºã§ããŸãã
äžèšã®ããã«ããµã€ãã®Contentfulã¢ã€ãã ã«ãã¬ãŒã¹ãã«ããŒç»åãè¿œå ããããšã¯ããŠããŸããã ç§ã®ãããžã§ã¯ãã¯ãã¥ãŒããªã¢ã«ã«åŸãããã ãã®ãã®ã§ãããäœè ã«åžžã«ç»åãæåºããŠããããããããŸããã
ãããå°æ¥äºæããªãå¯äœçšãããããããšãéåžžã«æããŠãããä»åŸã®é©åãªãããžã§ã¯ãã«ãããªïŒGatsby.js + ContentfulïŒã®ãœãªã¥ãŒã·ã§ã³ã䜿çšããããšãéåžžã«èºèºããŠããŸãã
çµéšè±å¯ãªéçºè ããã®åé¡ã«å¯ŸåŠããæ¹æ³ã¯ãããŸããïŒ
@ martink-rsaç§ã¯ãã®ãã¥ãŒããªã¢ã«ã«åŸããªãã£ãã ç§ã¯å®éã®ãããžã§ã¯ãã«åãçµãã§ããŠããã®åé¡ã«ãééããŸãããç§ã®è§£æ±ºçã¯ããã¬ãŒã¹ãã«ããŒã®ããªãã¯ãå®è¡ããããšã§ãã:(
ããŒãžã§ã³2.1.67
åã³ãã®ãšã©ãŒã«çŽé¢ããŸãã
ãã®åé¡ã¯ãããŒãžã§ã³2.1.69
ã§ãã³ã³ãã³ããã«ã«ãããŒç»åãè¿œå ããå Žåã§ãçºçããŸããã
fragement.jsãã¡ã€ã«ãåé€ããããã¢ãžã¥ãŒã«ãåã€ã³ã¹ããŒã«ããŠãã£ãã·ã¥ãã¯ãªãŒã³ã¢ããããããããªã©ããã¹ãŠã®ææ¡ãè¡ããŸããããã ããContentfulã®ã¡ãã£ã¢ãã©ã«ããŒã«ããããŒãã®ç»åãè¿œå ãããŸãã...¯_ïŒãïŒ_ /¯ããééããªãBug
ãããªã«ãããããŸãã
@Kureykoã®ã³ã¡ã³ãããã
ãã®åé¡ãææ°ããŒãžã§ã³2.1.69
åçŸã§ããŸã
blogPost
ãšããã³ã³ãã³ãã¢ãã«ããããŸããå
¬éãããããã°æçš¿ãnpm run develop
ãå®è¡ãããšãgatsbyãã¹ããŒããŸãã
ERROR #11321 PLUGIN
"gatsby-node.js" threw an error while running the createPages lifecycle:
Cannot read property 'allContentfulBlogPost' of undefined
TypeError: Cannot read property 'allContentfulBlogPost' of undefined
- review-page.js:48 module.exports.buildReviewPages
build/review-page.js:48:22
- task_queues.js:85 processTicksAndRejections
internal/process/task_queues.js:85:5
- gatsby-node.js:7 async Object.module.exports.createPages
gatsby-node.js:7:3
- api-runner-node.js:235 async runAPI
gatsbyãã«ããæåãããã«ã¯ããã®æçš¿ãåå ¬éããããæ°ããããã°æçš¿ãå ¬éããå¿ èŠããããŸãã
ããã«ã¡ã¯ã
ããã§åãåé¡ã
Gatsbyãããžã§ã¯ãã®ã«ãŒãã«ãã.cacheãã¡ã€ã«ãåé€ããã ãã§æ©èœãããããšãã§ãããšããŠããContentfulããæ¢åã®ã³ã³ãã³ããšã³ããªïŒãã§ã«ã¡ãã£ã¢ã¢ã»ããã«é¢é£ä»ããããŠããïŒãåé€ãããšããã«ãGatsbyãåèµ·åããåŸã«å€æ°ã®ãšã©ãŒãçºçããŸãã
ãšã©ãŒïŒ85901 GRAPHQL
GraphQLã¯ãšãªã«ãšã©ãŒããããŸããïŒ
äžæãªã¿ã€ããContentfulFixedãã
ãã¡ã€ã«ïŒnode_modules / gatsby-source-contentful / src / Fragments.jsïŒ20ïŒ37
ãšã©ãŒïŒ85923 GRAPHQL
GraphQLã¯ãšãªã«ãšã©ãŒããããŸããïŒ
ã¿ã€ããã¯ãšãªãã®ãã£ãŒã«ããallContentfulBlogPostããã¯ãšãªã§ããŸããã
ãšã©ãŒïŒ98123 WEBPACK
ãšã©ãŒã¿ã€ããã¯ãšãªãã®ãã£ãŒã«ããallContentfulBlogPostããã¯ãšãªã§ããŸããgraphql / template-strings
ãããŠãGatsbyãããžã§ã¯ãã®ã«ãŒãã«ãã.cacheãã¡ã€ã«ãåé€ããŠãåã³æ©èœãããå¿ èŠããããŸãïŒ-/
ãããã£ãŠã Contenfulããã³ã³ãã³ããåé€ãããšãã®ã£ãããŒã«é¢é£ããŠããããã«èŠããŸãïŒãã©ã°ã€ã³ããã£ãã·ã¥ãç ŽæããŠããŸã... ??ïŒã
也æ¯
ãã®åé¡ãææ°ããŒãžã§ã³
2.1.69
åçŸã§ããŸã
blogPost
ãšããã³ã³ãã³ãã¢ãã«ããããŸããå ¬éãããããã°æçš¿ãnpm run develop
ãå®è¡ãããšãgatsbyãã¹ããŒããŸããERROR #11321 PLUGIN "gatsby-node.js" threw an error while running the createPages lifecycle: Cannot read property 'allContentfulBlogPost' of undefined TypeError: Cannot read property 'allContentfulBlogPost' of undefined - review-page.js:48 module.exports.buildReviewPages build/review-page.js:48:22 - task_queues.js:85 processTicksAndRejections internal/process/task_queues.js:85:5 - gatsby-node.js:7 async Object.module.exports.createPages gatsby-node.js:7:3 - api-runner-node.js:235 async runAPI
gatsbyãã«ããæåãããã«ã¯ããã®æçš¿ãåå ¬éããããæ°ããããã°æçš¿ãå ¬éããå¿ èŠããããŸãã
ã³ã³ãã³ããã«ã®ã¡ãã£ã¢ãã¡ã€ã«ã«ç»åãè¿œå ãããµãŒããŒãåèµ·åããŸãã
ã³ã³ãã³ããã«ã®ã¡ãã£ã¢ãã¡ã€ã«ã«ç»åãè¿œå ãããµãŒããŒãåèµ·åããŸãã
ããã¯åžžã«æåã«ééããåé¿çã§ããããããã§ã«å®äºããŠããŸãã
å®éãç§ã¯ããã°æçš¿ã«é¢é£ããã¡ãã£ã¢è³ç£ãæã£ãŠããŸãïŒ
ããªãã¯æ¬åœã«publishigã§è©ŠããŠãããContentfulã®ã³ã³ãã³ããšã³ããªãåé€ããå¿
èŠããããŸã...
éåžžã.cache !!ãã¯ãªã¢ããå¿
èŠã¯ãããŸããããããããcontentfulã®ã³ã³ãã³ããšGatsbyã®slugsã¢ããªã®éã®ãéåæãããšã«ãµãŒããŒãåèµ·åããã ãã§ãã
ãã£ãŒãããã¯ãããããšãã
åãåé¡ã蚺æããŠãããšãã«ããã«ééãã gatsby / packages / gatsby-source-contentful / src /gatsby-node.jsã®ãœãŒã¹ã³ãŒãã«ãããã®ã³ã¡ã³ãã¹ãããããå ±æããããšæããŸãã
// Check if there are any ContentfulAsset nodes and if gatsby-image is installed. If so,
// add fragments for ContentfulAsset and gatsby-image. The fragment will cause an error
// if there's not ContentfulAsset nodes and without gatsby-image, the fragment is useless.
GraphQLã¯nullãšã³ããªãé©åã«åŠçãããããã©ã«ãã§ã¯Contentfulã®ãã¹ãŠã®ã¢ã»ããã«å¯ŸããŠgatsby-source-contentul
ãã©ã°ã€ã³ã¯ãšãªãå®è¡ãããããã¢ã»ãããèŠã€ãããªãå Žåã¯ãšã©ãŒãçºçããŸãã
åé¡ïŒ2392ã®è°è«ãããããããã«ã¹ã¿ã ã¹ããŒããgatsby-source-contentful
ãã©ã°ã€ã³ã«è¿œå ããããšã§ããããã®åé¡ãé²ãããšãã§ããŸãã ãã ããåœé¢ã®éãæåã®ãä¿®æ£ãã¯ãã³ã³ãã³ããã«>ã¡ãã£ã¢ã«ç»åãè¿œå ããããšã§ããã fragments.js
ãåé€ããªãããšã§ãã
ã²ãïŒ
ãã®åé¡ã¯éãã«ãªããŸããã äžæ°å³ãªéãã ð»
å€ãã®åé¡ãçºçããŠãããããçŸåšã30æ¥é䜿çšãããªãã£ãåŸã«åé¡ãã¯ããŒãºããŠããŸãã ããã§ã®æåŸã®æŽæ°ããå°ãªããšã20æ¥ãçµéããŠããŸãã
ãã®åé¡ãèŠéããå ŽåããŸãã¯éãããŸãŸã«ããŠããããå Žåã¯ãããã«è¿ä¿¡ããŠãã ããã ãã®åé¡ãéãããŸãŸã«ããããã«ããå€ããªãããšããã©ãã«ãè¿œå ããããšãã§ããŸãã
ãããããã泚æãšããŠããã®åé¡ãŸãã¯ãã®ä»ã®ä¿®æ£ãããåé¡ã確èªããæåã®æ¹æ³ã¯ããã«ãªã¯ãšã¹ããéãããšã§ãã PRã®éå§ãåé¡ã®ããªã¢ãŒãžãããã³è²¢ç®ã®è©³çŽ°ã«ã€ããŠã¯ã gatsby.dev / contributeã確èªããŠãã ããã
Gatsbyã³ãã¥ããã£ã«åå ããŠããã ãããããšãããããŸãã ðªð
ãããŸãäŒã£ããïŒ
ãã®åé¡ã§äœããèµ·ãã£ãŠãã30æ¥ãçµéããã®ã§ãç§ãã¡ã®ãã¬ã³ããªãŒãªè¿æã®ããããïŒããã¯ç§ã§ãïŒïŒããããéããŸãã
ç§ã¯ããããã«ãããªãã®ã§ããã®åé¡ã誀ã£ãŠã¯ããŒãºããå Žåãç§ã¯HUMAN_EMOTION_SORRY
ããšã«æ³šæããŠãã ããã ä»ã«å¿
èŠãªå Žåã¯ããã®åé¡ãå床éãããæ°ããåé¡ãäœæããŠãã ããã
ãããããã泚æãšããŠããã®åé¡ãŸãã¯ãã®ä»ã®ä¿®æ£ãããåé¡ã確èªããæåã®æ¹æ³ã¯ããã«ãªã¯ãšã¹ããéãããšã§ãã PRã®éå§ãåé¡ã®ããªã¢ãŒãžãããã³è²¢ç®ã®è©³çŽ°ã«ã€ããŠã¯ã gatsby.dev / contributeã確èªããŠãã ããã
ã®ã£ãããŒã³ãã¥ããã£ã«åå ããŠããã ããããããšãããããŸãã ðªð
åäžã®ã¡ãã£ã¢èŠçŽ ãè¿œå ããããšãç§ã«ãšã£ãŠã¯ããŸããããŸããããç§ã¯èå³ããããŸãããã®ãã°ã®æ ¹æ¬çãªåå ã¯Contentfulã®APIãŸãã¯gatsby-source-contentfulã§ããïŒ
ç§ãåããšã©ãŒãçºçããŸãã
ç·šéïŒç»åã¢ã»ãããè¿œå ãããã®ç»åã衚瀺ããããã°æçš¿ãäœæãããšãåé¡ããä¿®æ£ããããããã§ã
myName<strong i="8">@myComputer</strong>:~/www/gatsby-bootcamp$ rm -rf .cache && npm run develop
> [email protected] develop /home/myName/www/gatsby-bootcamp
> env-cmd -f env.development gatsby develop
success open and validate gatsby-configs - 0.067s
success load plugins - 2.227s
success onPreInit - 0.005s
success initialize cache - 0.014s
success copy gatsby files - 0.117s
success onPreBootstrap - 0.015s
success createSchemaCustomization - 0.489s
Starting to fetch data from Contentful
Fetching default locale
default locale is : en-US
contentTypes fetched 1
Updated entries 2
Deleted entries 0
Updated assets 0
Deleted assets 0
Fetch Contentful data: 315.783ms
success source and transform nodes - 0.600s
success building schema - 0.405s
success createPages - 0.032s
success createPagesStatefully - 0.072s
success onPreExtractQueries - 0.004s
success update schema - 0.037s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:20:37
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:34:47
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:48:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:61:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:77:55
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:92:37
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:106:47
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:120:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:133:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:149:55
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:161:43
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:171:53
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:181:52
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:190:52
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:202:61
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:213:37
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:223:47
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:233:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:242:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:254:55
failed extract queries from components - 0.695s
success write out requires - 0.037s
success write out redirect data - 0.007s
success onPostBootstrap - 0.003s
â
info bootstrap finished - 9.644 s
â
success run queries - 0.148s - 11/12 80.81/s
success Generating image thumbnails - 0.900s - 3/3 3.33/s
â
You can now view gatsby-starter-hello-world in the browser.
â
http://localhost:8000/
â
View the GraphQL Playground, an in-browser IDE, to explore your site's data and schema
â
http://localhost:8000/___graphql
â
Note that the development build is not optimized.
To create a production build, use gatsby build
â
success Building development bundle - 5.216s
ãã®åé¡ã¯æ¬åœã«éããã¹ãã§ã¯ãããŸããã æ¢ç¥ã®åå ããããŸãïŒã¡ãã£ã¢ã¢ã»ããã®ãªãã³ã³ãã³ããã«ã¹ããŒã¹ã䜿çšïŒã ãŸãããã®è°è«ã«å¯Ÿããã³ã¡ã³ãã®æ°ãšã³ã¡ã³ããžã®åå¿ãèãããšãããã¯ãŸãšããªåœ±é¿ãåãŒããŸãã
ãããåã¢ã¯ãã£ãåããŠãããããéããã®ãé²ãæ¹æ³ã¯ãããŸããïŒ
ïŒãªããããã¯ïŒåé¡ãèªåã¯ããŒãºããããããå®è¡ããŠããã¡ã³ããã®åŸåã¯æ¬åœã«å«ãã§ãã30æ¥ä»¥å ã«ã³ã¡ã³ãããªããããšãã£ãŠãåé¡ã®çŸå®æ§ã圱é¿åãäœäžããããšã¯ãããŸããã圹ã«ç«ããªãã+1ããå©é·ããŸããåé¡ããåç¶ããããããã®ã³ã¡ã³ãïŒ
ããã¯ãŸã éããŠããã¯ããªã®ã§ãåéããŸãã
誰ãããããä¿®æ£ããæ¹æ³ã«ã€ããŠäœãèãããããŸããïŒ
https://github.com/gatsbyjs/gatsby/issues/15397ã®è€è£œã¯ãã©ããæ¬åœã«éãããŸãŸã«ããã®ã«æé©ãªã¹ã¬ããã§ããããããããããŸããã
æè¿èŠã€ãããã®ã«ã€ããŠãä»ã®ã¹ã¬ããã«ããã€ãã®è©³çŽ°ãè¿œå ããŸããã ããããã€å°å ¥ããããã«ã€ããŠã ããã¯ãæ¿å ¥ããŠåºå®ã§ããå Žæã
以äžã®configãgatsby-config.jsã«è¿œå ããŸããã
{
resolve: "gatsby-source-filesystem",
options: {
name: "src",
path:
$ {__ dirname} / src ,
},
}
åãåé¡ãçºçããææ¡ãããããã«ã¡ãã£ã¢ã¢ã»ããã«ç»åãè¿œå ãããšãæ©èœããŸããã æå³ããããŸããããããªãã¯ãããŸãã...
åã... Contentfulã§ç»åãè¿œå ããåŸãåé¡ã¯ãªããªããŸããã ç§ãä»ãŸã§èŠãäžã§æãå¥åŠãªããš...;-9
ãããŠïŒããã¯ç§ãã¡ãè¬èãªå°ç人ã«èµ·ãã£ãŠããã ãã§ãªããããã§ãåãããšãèµ·ãã£ãŠããã®ãèŠãããšãã§ããŸãïŒ https ïŒ
ãã¹ãŠã®ããªãã¯ãè©ŠããåŸãæçµçã«ç»åãã¢ããããŒããããšæ©èœããŸãã ãžã§ã€ãœã³ã»ã¬ã³ã°ã¹ãã«ãèªèº«ã¯ãããããééããªãã®ã£ãããŒã®åé¡ãã§ããããšãèªããŠããŸãïŒ
ãšã©ãŒïŒ85901 GRAPHQL
ããã°ãã³ã³ãã³ãããååŸããããšããŠããŸãããå¥åŠãªãšã©ãŒãçºçããŸãã
ç§ããã®åé¡ãéããŠããå¯äžã®çç±ã¯ããšã©ãŒãç§ã«ããããããã«èšã£ãããã§ããããã¯ãšã©ãŒãèšã£ãããšã§ãïŒ
ãšã©ãŒïŒãã®StaticQueryã®çµæããã§ããã§ããŸããã§ããããããã¯Gatsbyã®ãã°ã§ããå¯èœæ§ããããŸããããŒãžãæŽæ°ããŠãä¿®æ£ãããªãå Žåã¯ã httpsïŒ//github.com/gatsbyjs/gatsby/issuesã§åé¡ãéããŠ
gatsbyæ å ±åºåïŒ
ã·ã¹ãã ïŒ
OSïŒWindows 10
CPUïŒïŒ8ïŒx64 IntelïŒRïŒCoreïŒTMïŒi7-3632QM CPU @ 2.20GHz
ãã€ããªïŒ
npmïŒ6.9.0-CïŒ\ Program Files \ nodejs \ npm.CMD
èšèªïŒ
PythonïŒ3.7.2
ãã©ãŠã¶ïŒ
ãšããžïŒ44.18362.1.0
npmPackagesïŒ
ã®ã£ãããŒïŒ^ 2.13.51 => 2.13.51
gatsby-plugin-sassïŒ^ 2.1.4 => 2.1.4
gatsby-plugin-sharpïŒ^ 2.2.10 => 2.2.10
gatsby-remark-imagesïŒ^ 3.1.7 => 3.1.7
gatsby-remark-relative-imagesïŒ^ 0.2.3 => 0.2.3
gatsby-source-contentfulïŒ^ 2.1.18 => 2.1.18
gatsby-source-filesystemïŒ^ 2.1.9 => 2.1.9
gatsby-transformer-åèïŒ^ 2.6.11 => 2.6.11ãšã©ãŒæªåŠçã®æåŠ
ãšã©ãŒïŒã·ã¹ãã ã¯æå®ããããã¹ãèŠã€ããããšãã§ããŸããã
- envinfo.jsïŒ1 Function.e.exports.sync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:4908- envinfo.jsïŒ1 Object.copySync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:66886- envinfo.jsïŒ1 Object.t.writeSync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:48715- envinfo.jsïŒ1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46872- envinfo.jsïŒ1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46887- task_queues.jsïŒ88 processTicksAndRejections
internal / process / task_queues.jsïŒ88ïŒ5
æ¬äœéšåã§ãªããããã¹ãããã¯ã¹ãéžæãããããã³ã³ãã³ãã®å€ããµã€ãã«ç»åãè¿œå ããå¿ èŠããããŸããç»åãè¿œå ããŠãããµãŒããŒãåèµ·åãããšããããã®ãšã©ãŒã¯ãªããªããŸãã
ãã®è§£æ±ºçã§ã¯ãªããããè¯ã解決çã«ã€ããŠãã£ãŒãããã¯ãææ¡ãããŠãã ããã #happyCoding :)
è¿œå ãã
{ resolve: "gatsby-source-filesystem", options: { name: "src", path: ${__dirname}/src, }, }
gatsby-config.jsã圹ã«ç«ã¡ãŸãã
https://itnext.io/content-management-with-gatsby-netlify-and-contentful-70f03de41602ããã©ããŒããŠãããšãã«ããã®ãšã©ãŒãåçŸã§ã
node_modules / gatsby-source-contentful / sec / Fragments.jsãåé€ãããšããšã©ãŒããä¿®æ£ããããããã§ãã
ç§ã®åé¡ãä¿®æ£ããŸããã ããããšã
ããããšããããã¯ç§ã®ããã«åãã:)
ã²ãïŒ
ãã®åé¡ã¯éãã«ãªããŸããã äžæ°å³ãªéãã ð»
å€ãã®åé¡ãçºçããŠãããããçŸåšã30æ¥é䜿çšãããªãã£ãåŸã«åé¡ãã¯ããŒãºããŠããŸãã ããã§ã®æåŸã®æŽæ°ããå°ãªããšã20æ¥ãçµéããŠããŸãã
ãã®åé¡ãèŠéããå ŽåããŸãã¯éãããŸãŸã«ããŠããããå Žåã¯ãããã«è¿ä¿¡ããŠãã ããã ãã®åé¡ãéãããŸãŸã«ããããã«ããå€ããªãããšããã©ãã«ãè¿œå ããããšãã§ããŸãã
ãããããã泚æãšããŠããã®åé¡ãŸãã¯ãã®ä»ã®ä¿®æ£ãããåé¡ã確èªããæåã®æ¹æ³ã¯ããã«ãªã¯ãšã¹ããéãããšã§ãã PRã®éå§ãåé¡ã®ããªã¢ãŒãžãããã³è²¢ç®ã®è©³çŽ°ã«ã€ããŠã¯ã gatsby.dev / contributeã確èªããŠãã ããã
Gatsbyã³ãã¥ããã£ã«åå ããŠããã ãããããšãããããŸãã ðªð
ãããç¡å¹ã«ããæ¹æ³ã¯ãããŸããïŒ âïž
ãã®åé¡ã¯ãContentfulã§Gatsbyã䜿çšãããã¹ãŠã®äººã«åœ±é¿ããŸãã ç§ã®æèŠã§ã¯ãããã«å¯Ÿããä¿®æ£ãèŠã€ãããŸã§éããã¹ãã§ã¯ãããŸããïŒå®éã®ä¿®æ£ã§ãããåé¿çã§ã¯ãããŸããïŒã
ããã¯https://github.com/gatsbyjs/gatsby/issues/15397ã®è€è£œã§ãããããã§è¿œè·¡ããããšæããŸãã
åããšã©ãŒãçºçããå Žåã¯ã次ã®æé ãå®è¡ããŠãããŒã¿ãåé€ãããããã±ãŒãžãããŠã³ã°ã¬ãŒããããããã«è§£æ±ºããŸããã
- ããªãã®æºè¶³ã®ãã空éã«å ¥ã
- [ã¡ãã£ã¢]ã¿ããã¯ãªãã¯ãããã¬ãŒã¹ãã«ããŒãšããŠæ©èœãããããŒç»åãšããŠåäžã®ã¢ã»ãããè¿œå ããŸã
npm run develop
ãŸãã¯gatsby develop
å®è¡ããŠãéçºãµãŒããŒãåèµ·åããŸãããŸãããã°ãããã¯ããªãã®åé¡ã解決ããŸããã誰ããç§ãã¡ã«ãããäºå®ã§ããçç±ãæããŠããããªãããã¯åœ¹ã«ç«ã€ãããããŸããã
ã¡ãã£ã¢ã¢ã»ããã«ç»åãè¿œå ããããšãç§ã«ãšã£ãŠã¯ããŸããããŸããã çç±ãããããŸããã
æãåèã«ãªãã³ã¡ã³ã
åããšã©ãŒãçºçããå Žåã¯ã次ã®æé ãå®è¡ããŠãããŒã¿ãåé€ãããããã±ãŒãžãããŠã³ã°ã¬ãŒããããããã«è§£æ±ºããŸããã
npm run develop
ãŸãã¯gatsby develop
å®è¡ããŠãéçºãµãŒããŒãåèµ·åããŸãããŸãããã°ãããã¯ããªãã®åé¡ã解決ããŸããã誰ããç§ãã¡ã«ãããäºå®ã§ããçç±ãæããŠããããªãããã¯åœ¹ã«ç«ã€ãããããŸããã