Published on October 4, 2017 by LevelUpTuts
Want create site? Find Free WordPress Themes and plugins.

Master Figma! The next generation, cross platform, design app.
goo.gl/UxHPFT

Subscribe for more free tutorials goo.gl/6ljoFc

Support Free Tutorials
www.leveluptutorials.com/store/

The best shared web hosting
www.bluehost.com/track/leveluptutorials/

Subscribe to Level Up Pro for extra features!
www.leveluptutorials.com/store/products/pro

Subscribe to the Level Up Newsletter
eepurl.com/AWjGz

Simple cloud hosting, built for developers.:
www.digitalocean.com/?refcode=67357174b09e

Modern web tech without the headache

Enjoy all the power of the latest web technologies. React.js, webpack, modern JavaScript and CSS and more are all setup and waiting for you to install and start building.

Bring your own data

Gatsby’s rich data plugin ecosystem lets you build sites with the data you want. Integrate data from one or many sources: headless CMSs, SaaS services, APIs, databases, your file system, and more. Pull data directly into your pages using GraphQL.

Scale to the entire internet

Gatsby.js is Internet Scale. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.

Future-proof your website

Don’t build a website with last decade’s tech. The future of the web is mobile, JavaScript and APIs—the JAMstack. Every website is a web app and every web app is a website. Gatsby.js is the universal JavaScript framework you’ve been waiting for.
Static Progressive Web Apps
Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads an HTML file that’s a server rendered version of your React.js page then makes it live with JavaScript. Code and data for other pages get preloaded so clicking around the site feels incredibly fast.

Speed past the competition

Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers—ready to be delivered instantly to your users wherever they are.

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

6 Comments on "Gatsby Tutorials #9 – Filters & Sorting With GraphQL"

Notify of
avatar

tenpoundboyy
Guest
tenpoundboyy
9 days 20 hours ago

Love these tutorials! Quick question about adding images to the front matter: I figured it would be pretty straightforward to add images to the blog posts. I added an image to the same folder as the index.md file. Then added indexImage: ./img.jpg to the front matter. I added indexImage to the graphql query and referenced post.frontmatter.indexImage as the src in my <img> tag. But no luck so far. Any thoughts on why this isn't working? Thanks in advance!

Pierre Nel
Guest
Pierre Nel
13 days 21 hours ago

Thanks so much, I couldn't find a solid example of filtering on the official docs 😉

Jordan Duder
Guest
Jordan Duder
15 days 20 hours ago

Appreciate the content, looking forward to more!

David Luhr
Guest
David Luhr
17 days 10 hours ago
This series is by far the best resource on Gatsby, which is quickly becoming my favorite technology to work with. I have a single aspect of my Gatsby project I'm trying to figure out: how to dynamically build navigation menus of .js pages. With Markdown, this functionality is easy to achieve, as you demonstrated in tutorial #7, but I'm stumped on how to do this with .js files.It seems possible to get the path with the "allFile" GraphQL query, but I can't figure how I would add/access custom fields, such as the page title. Any findings with this would be… Read more »
Tillmann Huebner
Guest
Tillmann Huebner
17 days 3 hours ago

create a menu component with a query and work with that data. If you pull up graphiql you can put in such a query and see the stuff you can work with{ allFile { edges { node { id sourceInstanceName extension } } } }for the information part you could look at the allMarkdownRemark plugin how they achived the frontmatter part.

akankha ahmed
Guest
akankha ahmed
17 days 14 hours ago

Master Figm seems really nice. have also have some web service starting from 5$ only check it our fiverr.com/akankha

wpDiscuz