Danywalls

Graphql and Gatsby Day 2

February 25, 2019

I found that Gatsby uses GraphQL for sending data through to components, that means that understanding how GraphQL works in Gatsby is a must.

Gatsby comes with a GraphQL’s web IDE for executing and testing our queries. When we run gatsby develop, this runs an instance of GraphQL IDE at http://localhost:8000/___graphql. You can also use this electron app for desktop: https://electronjs.org/apps/graphiql.

GraphQL IDE

GraphiQL allows you to write, format and keep a history of all queries executed in the documentation explorer.

The documentation explorer shows information about the context exposed through GraphQL, the type of argument and data available for our Gatsby project.

Add custom data to query

If you remember my previous post about the gastby-config.js, it is used to register plugins and also store site metadata.

We can query the data from site metadata. In my example, I will add a new field named nbateams with a list of Nba teams into the siteMetada object in the gasty-config.js file.

siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
nbateams: [{ name: “Lakers” }, { name: “Cavs” }, { name: “Heats” }]
},

Save your changes and run gatsby develop it will start our gatsby server and GraphQL IDE.

Write the query

We begin to write a query using { } and the IDE will show suggestion about arguments or data available.

Set a name for our query adding name and: like getNbaTeams : { } and start to type site, the IDE again will suggest and drilling down to siteMetadata, nbateams, and the name of teams, then click into the play button.

It will show the list of teams stored in the gatsby-config.js

Query the file-system

Gatsby comes with gatsby-source-filesystem plugin by default to allow access to file system, by default it points to the images directory. Change path from images to src in the gastby-config.js and start gatsby develop.

{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`
}
}

The documentation explorer shows all accessible data including allFile, the allFile accept the parameters limit, skip, sort and filter.

Our new query will use the filter parameter to find all .js files into the src directory.

The documentation also explains which criteria is accepted by the filter, we will use extension.

The extension accepts the following options to be compared, we pick eq.

In a nutshell, we will use allFile and using the filter by extension be equals to “js” it shows to return the list of .js stored in src.

For select the data, then we use Edges, the Edges allow to find data about our current context wrapper into the node object.

{
allFile(filter:{ extension: { eq: “js”}}){
edges{
node{
size,
name,
extension
}
}
}
}

There you have it! This is my second day playing with Gatsby and reading about Graphql. I hope you enjoyed and hope to be a little bit useful.

https://blog.apollographql.com/explaining-graphql-connections-c48b7c3d6976

https://graphql.org/learn/


Dany Paredes

Hi, I'm Dany Paredes, few years ago I was working with .NET, but in my last years I have been focusing in Javascript using Vue , Angular or React. You can read more in Twitter or Github.