J'essaye de configurer mon premier site gatsby + wordpress. Je suis ce tutoriel.
Je fais fonctionner le site, mais au moment où je devrais obtenir les données de WP, je reste bloqué. J'ai ajouté le plugin Gatsby-Source-Wordpress. Après avoir redémarré le site, il jette cette erreur:
module.exports = {
siteMetadata: {
title: `Gatsby wordpress test`,
description: `Testing...`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`,
},
},
{
resolve: "gatsby-source-wordpress",
options: {
baseUrl: `localhost:8888`,
protocol: `http`,
hostingWPCOM: false,
useACF: true,
},
},
`gatsby-plugin-sitemap`,
],
}
Je lance WP localement avec Mamp et je peux voir les données JSON ici: http: // localhost: 8888 / GatsbyWP / wp-json / .
Voici mon fichier gatsby-config.js:
success open and validate gatsby-configs - 0.102 s
success load plugins - 0.631 s
success onPreInit - 0.019 s
success initialize cache - 0.053 s
success copy gatsby files - 0.161 s
success onPreBootstrap - 0.040 s
info Creating GraphQL type definition for File
Path: /wp-json
The server response was "404 Not Found"
ERROR #11321 PLUGIN
"gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:
Cannot read property 'data' of undefined
TypeError: Cannot read property 'data' of undefined
- fetch.js:141 fetch
[gatsby-wordpress]/[gatsby-source-wordpress]/fetch.js:141:21
- next_tick.js:68 process._tickCallback
internal/process/next_tick.js:68:7
warn The gatsby-source-wordpress plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 0.327 s
success building schema - 0.404 s
success createPages - 0.019 s
success createPagesStatefully - 0.090 s
success onPreExtractQueries - 0.022 s
success update schema - 0.079 s
success extract queries from components - 0.595 s
success write out requires - 0.103 s
success write out redirect data - 0.032 s
success Build manifest and related icons - 0.263 s
success onPostBootstrap - 0.308 s
â €
info bootstrap finished - 6.617 s
â €
success run static queries - 0.105 s — 3/3 36.11 queries/second
success run page queries - 0.044 s — 5/5 230.97 queries/second
DONE Compiled successfully in 4851ms 10:46:42 AM
â €
You can now view gatsby-starter-default in the browser.
â €
http://localhost:8000/
â €
View GraphiQL, 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 npm run build
â €
ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.
Je suis coincé et je ne sais pas quoi faire maintenant. J'ai trouvé que d'autres personnes avaient un problème similaire à celui-ci, mais je n'ai trouvé aucune bonne réponse ou direction où essayer de résoudre mon problème.
Merci d'avance!
3 Réponses :
Les options de gatsby-source-wordpress nécessitent ...
l'URL de base du site Wordpress sans la barre oblique et le protocole. Ceci est nécessaire.
Exemple: 'gatsbyjsexamplewordpress.wordpress.com' ou 'www.example-site.com'
module.exports = {
siteMetadata: {
title: `Gatsby wordpress test`,
description: `Testing...`,
author: `@gatsbyjs`,
},
plugins: [
{
resolve: "gatsby-source-wordpress",
options: {
baseUrl: `localhost:8888/GatsbyWP`,
protocol: `http`,
hostingWPCOM: false,
useACF: true,
},
},
],
}
Lors de l'approvisionnement en hébergement à partir de services comme Godaddy Les clients axios / node peuvent être douteux à leur sujet et rejeter le https crt, j'ai vu cela rectifié de deux manières
1) Avec l'ajout d'un bundle tiers go daddy crt, par exemple https://ssl-ccp.godaddy.com/repository?origin=CALLISTO , si vous avez votre propre serveur, c'est bien. Donc, en ajoutant ceci à axios:
{
resolve: `gatsby-source-wordpress`,
options: {
/*
* The base URL of the WordPress site without the trailingslash and the protocol. This is required.
* Example : 'dev-gatbsyjswp.pantheonsite.io' or 'www.example-site.com'
*/
baseUrl: `example.com`,
// The protocol. This can be http or https.
protocol: `http`,
// Indicates whether the site is hosted on wordpress.com.
// If false, then the assumption is made that the site is self hosted.
// If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
// If your site is hosted on wordpress.org, then set this to false.
hostingWPCOM: false,
// ou
export NODE_EXTRA_CA_CERTS=[your CA certificate file path]
ou nœud
var instance = axios.create({ agent: agent });
instance.get(url);
2) Mais que se passe-t-il si vous êtes sur Netlify ou hébergé via gitlab ou autre, ce qui a fonctionné pour moi a été le changement de mon protocole de configuration gatsby en http , cela m'a permis de me procurer de mon site très bien et à condition que tous les actifs soient de toute façon https, même lorsque je déployé sur mon site https, tout fonctionnait toujours. Cela m'a étonné pendant des jours, j'espère que cela aide quelqu'un
var agent = new https.Agent({
ca: fs.readFileSync('ca.pem')
});
axios.get(url, { agent: agent });
Hé, vous devez vous assurer que vous interrogez les types de messages que vous tirez et vous devez également vous assurer qu'il y a des données à consommer, mais voici à quoi vous devriez ressembler.
{
resolve: `gatsby-source-wordpress`,
options: {
baseUrl: process.env.API_URL,
protocol: process.env.API_PROTOCOL,
hostingWPCOM: false,
useACF: true,
includedRoutes: [
"**/categories",
"**/posts",
"**/pages",
"**/media",
"**/tags",
"**/taxonomies",
"**/users",
"**/menus",
"**/portfolio",
"**/services",
"**/qualifications",
"**/gallery",
"**/logo",
"**/location",
],
},
},
Si vous changez
baseUrlenhttp://localhost:8888/GatsbyWP/que se passe-t-il?Hé ça a marché! Je dépasse ce problème et fais face au prochain que je vais résoudre maintenant. Un grand merci pour vous.
OK super. J'ai ajouté le commentaire ci-dessus en tant que réponse avec un peu plus d'informations et un lien vers les documents.