Welcome to part-6 of the series. Gatsby

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

As told in the earlier post, we need to install some plugins for using one of the main feature of Gatsby, which is image optimization in sites.

We need to install gatsby-source-filesystem first. This plugin is for using data into your Gatsby application, from local filesystem. In our case it will be images. The docs for the same can be found here.

As per the docs we need to npm install the plugin in our project directory.

So, head over to project directory and stop any gatsby develop, if it is running.

npm installnpm install

Next, we will update our gatsby-config.js file to use this plugin to get our images folder path

Gatsby configGatsby config

Let’s quickly verify, whether our plugin is working properly. So, head over to Graphiql and refresh the browser. After that run the below query. It will give us the number of files in the images folder. As we have 6 files in images folder, so it will give output 6.

GraphiQLGraphiQL

The gatsby-source-filesystem also provides us with another query called file, which gives details of any file present in images folder.

filefile

Next, we will install the gatsby-image plugin. This is the plugin, which we will use in our project to speed up image loading.

As per the docs, we have to do two npm installs. They are below.

npm install --save gatsby-image
npm install --save gatsby-transformer-sharp gatsby-plugin-sharp

npm installnpm install

After, the installs are complete update the gatsby-config.js file as below.

Gatsby ConfigGatsby Config

Next, start the project by running gatsby develop. As per the documentation, we need to use the gatsby-image plugin as below. We can have two type of images — fixed or fluid.

How to useHow to use

We can use the below fragments in our code, in place of GatsbyImageSharpFixed

FragmentsFragments

We will use this later in our project. For now we can check query in the GraphiQL.

GraphiQLGraphiQL

Let’s also check for the fluid one. We can check this from the same file code, but we need to give aliases as the name is same.

fixed and fluidfixed and fluid

As, you can see from above we cannot use the Fragments in our GraphiQL and using src. This is a limitation as of now, but we can use them without any error in our code.

Now, it’s time to use gatsby-image in our About component, which is in the home page. We will again create our GraphQL query in the GraphiQL first. Notice that we have also named the query — aboutImage.

query aboutImagequery aboutImage

Next, we will move to About component and paste our query from GraphiQL, to a variable getAbout. Also, notice that we had replaced src with a fluid fragment GatsbyImageSharpFluid_tracedSVG

Did some required imports at the top of the file and commented out our earlier import, which was used for displaying the image.

After that we are de-structuring aboutImage and then using the useStaticQuery, which is a hook provided by Gatsby.

Finally using Img from gatsby-image to display our image.

About componentAbout component

When you see the output on your browser, you can see the About component displaying the same image. But what you see is an optimized image, which loads very fast on all screen with even slow internet speeds.

New ImageNew Image

This completes part-6 of the series. You can find the code for the same in this link.

This post is also available on DEV.