Accessing page fields (not posts) with graphql

Hey there,

Wondering how I access my page fields rather than a blog post.

I want to be able to use netlify CMS as a content editor for my client and having some difficulty trying understand how to hook up my fields from a page to my Vue output.

Using gridsome to build, I’m just not sure what the graphql is meant to be on my Vue page.

I Also can’t seem to find enough documentation regarding the switch from folders to files.

If anyone can provide some assistance, that would be great!

Kind regards,

Guy

I’m also not sure about that, Guy - but you might try pinging in the CMS developers chat to see if they’ve seen that pattern before and have any advice (or know of open feature requests on the topic):

Hey fool “Chris”,

I ended up figuring this one out with some perseverance and got it working for how I needed.

I believe it came down to knowing and understanding how Graphql works more so and ensuring I had the right setup inside my config for my schema.

Did I need to provide anymore information on how I set this up at all for others?

Otherwise it’s all working now, appreciate you reaching out too!

Kind regards,

Guy

hi @KiMPo, we’d definitely love it if you shared more information for others - the more, the better!

1 Like

No worries at all.

I’ve put together the below based on I guess what my question was for how understood and aiming to achieve.

So, I’m using Gridsome as my SSG and I’ve followed Gridsome’s guide to setup Netlify CMS for my back end. With that, it shows you how to create blog posts which is basically a collection of posts which is great and a good start for what I wanted. However I was very curious about changing this slightly so I could create for example a simple collection of different page types, and within those page types, have different fields that would be the content of the website. So reading and trialing a heap of things and finally figuring a few things out, I was able to setup a collection of different pages and those pages had a few different fields within each.

Afer doing this, I could than house all the content within Netlify CMS and that way, for anyone that needed to update the content could do so within the CMS rather than a git push for the content… So technically speaking, all the content could be accessed through Netlify CMS.

I’ve got a couple of screens below to show how I’ve technically set it up and also how the markup is and what not…

Another thing that I’m in the middle of working through that I thought is kinda cool is the ability to change the blog posts into a portfolio showcase. So rather than having a blog, use it as a portfolio. So I’m in the middle of styling this and what not however, exactly same as blogs however just adding in an image to the CMS and using that with relevant data on the Portfolio page for example than each portfolio image / card linking through to the appropriate portfolio page. So far no need for linking but if the time comes to have a page for each portfolio item, could work pretty cool I would think.

Anyway, below couple of screens of how it works.

In my config.yml file where I’ve added in my “Pages” collection and my “About Page” reference and the fields with it, also showing another Page under “Footer Section” and so on… Which they hold my relevant fields:

My mark down file structure for this too, as I’ve highlighted my about.md file:
image

From here, I have a .vue file called “About” that uses page-query graphql to fetch the fields from the .md markdown file as per below, which I also than render out on the page:

Now how my Netlify CMS looks and the content showed on the page of my website:
Inside my Page’s folder:

Then within the “About Page” section:

Now on my website, here’s a screen shot of the content displaying… and I can change / toggle accordingly:

So yeah, I’ve kinda changed it a little and tried to make it more a friendly CMS for an editor who can go in and update any content they wish, to the extent it is hooked up to a markdown file and can be fed through accordingly.

Hopefully this helps anyone else that might try to do something similar, but I couldn’t really find anything in regards to the whole workflow / how to in doing such a thing on all the above.

Also Merry Christmas and Happy New Year in the case I’m not back to provide any other feedback! :slight_smile:

1 Like

thanks so much for sharing this detailed writeup!

1 Like

Thanks for the information

1 Like

Thanks for responding