Comments (11)
@Kainkainkain That is a very point. I see from your initial post that was a goal. 🤔
@hjvedvik Are you looking into hierarchical post types? I assume to keep the WP-API fields clean and intact, it would make sense to add a new 'hierarchy-link' (or whatever) field to the GraphQL store. This could be as simple as the permalink with the base URL removed right? I would love to know your thoughts on this.
from gridsome-starter-wordpress.
Instead of using a string with parameters in the template path
option, you can use a function, which allows you to get the full path.
WordPressPage: (node) => {
return new URL(node.link).pathname
}
from gridsome-starter-wordpress.
Just me that wants to render pages and child pages with correct routes matching WordPress permalinks so WordPress users can use the CMS headless without restriction?
I'm going to read up on how this add node thing works and see if I can split up the WordPress link attribute that's delivers things like '/sections/about-us/corporate-info/annual-report/' and see if I can make routes for each one dynamically.
from gridsome-starter-wordpress.
I feel like this is the answer but I don't understand the documentations context, like where I would put my modified version of the code- in the plugins array?
https://gridsome.org/docs/routing/#routing-for-custom-data
from gridsome-starter-wordpress.
I have been able to successfully build page and there routes without the wordpress starter,
So now I can build pages and routes, but I have to duplicate all the other benefits the the starter offered. 'link' does work, so the worpdress starter code (look complex when I looked it up in node_modules/@gridsome/source-wordpress).
If I was a better coder maybe I could make a pull to improve this starter but I can't, it will be faster for me to build from basic gridsome. Unfortunate I can't use this starter.
Check it:
//gridesome.server.js
const axios = require('axios')
module.exports = function (api) {
api.createManagedPages(async ({ createPage }) => {
const { data } = await axios.get('https://www.eg.com/wp-json/wp/v2/pages')
data.forEach(item => {
createPage({
path: '/'+item.link,
component: './src/layouts/Page.vue',
context: {
page: item,
// title: item.title,
// content: item.content
}
})
})
})
from gridsome-starter-wordpress.
Hi there @Kainkainkain , I got this working fine with:
module.exports = {
siteName: 'Gridsome',
siteDescription: 'A WordPress starter for Gridsome',
plugins: [
{
use: '@gridsome/source-wordpress',
options: {
baseUrl: 'https://www.url.dev', // required
typeName: 'WordPress', // GraphQL schema name (Optional)
perPage: 100, // How many posts to load from server per request (Optional)
concurrent: 10, // How many requests to run simultaneously (Optional)
routes: {
post: '/blog/:slug', //adds route for "post" post type (Optional)
page: '/:slug',
}
}
}
]
}
So page
simply set to:
page: '/:slug',
The main difference here is the homepage is in Gridsome, other pages aren't.
from gridsome-starter-wordpress.
@daviddarke and did this handle page parents and page depth? e.g.
like
/sections/about-us/index.html
/sections/about-us/corporate-info/index.html
/sections/about-us/corporate-info/annual-report/index.html
from gridsome-starter-wordpress.
I'm hoping to achieve this as well.
It would be nice to have paths reflect the URL structure already defined in WordPress where possible.
I think your interpretation is correct, @daviddarke, those would seem to be the options.
- Add field to GraphQL
- Add field to WordPress REST API
In any case, the new field would have a value equivalent to link
, but without the hostname.
I have attempted achieving the first option through Gridsome plugins and transformers, but haven't had any success.
Due to my lack of experience with Gridsome, currently the second option is looking more viable.
However, it would still be good to know if this can indeed be achieved in Gridsome.
from gridsome-starter-wordpress.
I have since attempted implementing this through WordPress, so just sharing my findings.
A link_relative
field can be added to responses using register_rest_field
.
/parent-page/child-page/
Node fields can be used as path parameters.
/:link_relative
Path parameters are slugified by default.
/parent-page-child-page/
Original values can be used by adding a _raw
suffix.
/:link_relative_raw
Special characters in original values seem to be encoded.
/%2Fparent-page%2Fchild-page%2F/
Unfortunately, modifying WordPress REST API responses gets pretty close, but does not seem to be a viable workaround.
Ideally, template paths could be defined programmatically when using source plugins, similar to createPage
.
Alternatively, it would be good to know how to add a field to GraphQL when using source plugins.
from gridsome-starter-wordpress.
I should have shared the solution i worked out:
data.allPages.edges.forEach(({ node }) => {
createPage({
path: `${node.link}`,
component: './src/components/Page.vue',
context: {
id: node.id,
slug: node.name,
title: node.title,
content: node.content,
parentid: node.parentid,
link: node.link,
byline: node.acf.byline,
page_type: node.acf.page_type,
acf: node.acf
}
})
}
})
from gridsome-starter-wordpress.
Hi @ramiroazar I attempted to follow the discussion in the linked feature request and I cannot work out how to apply it to the situation @Kainkainkain described in the original post in this thread. It seems that it is possible to obtain the parent slug?
I have the following code in my Gridsome.config.js templates block:
WordPressPage: '/:parent/:slug',
But on Gridsome build
that outputs
\0\page_with_id_22
\22\subpage_of_page_with_id_22
Which is if you squint nearly what I need, but doesn't quite get there.
Any suggestions?
from gridsome-starter-wordpress.
Related Issues (20)
- Cannot query field "url" HOT 3
- Error: Cannot query field "allWordPressPost" on type "Query". Did you mean "allGraphqlPost"? HOT 6
- Failed to fetch baseUrl HOT 9
- Page Template HOT 1
- sourceUrl error HOT 10
- Error: ECONNREFUSED - /wp-json/wp/v2/types HOT 9
- vue-svg-loader giving Error: Cannot query field "allWordPressP ost" on type "Query".
- Failed to make route like WordPress custom permalink
- Updating for v0.7, Routes/Templates HOT 3
- TypeError: Cannot destructure property `status` of 'undefined' or 'null'. HOT 16
- Custom Post Types 'rest_base' starting with '/' HOT 1
- Failed to compile with 2 errors HOT 4
- Use :category as path
- WordPress Multisite support HOT 1
- custom post types support?
- QUESTION: Support for JWT authentication
- Error graphQl run dev
- fails on POST with 400 HOT 3
- Clarification
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridsome-starter-wordpress.