Forem: Graeme T-Gill

Ecommerce with Gatsby and Shopify - Getting them to talk to each other

Graeme T-Gill — Fri, 30 Jul 2021 16:43:37 +0000

Gatsby is an open source frontend framework for creating dynamic, optimised websites and Shopify is an e-commerce platform for online stores. So how can you connect the two?

Well I had a little trouble at first getting Gatsby and Shopify to talk to each other but I got it to work in the end - here is how I did it.

In summary it turned out that I was using some out of date instructions. I won't go into how it didn't work but will cover what I did in the end to get it to work.

After contacting Gatsby support I received this reply -

It looks like you may be viewing documentation for the old version of gatsby-source-shopify. Here is the new plugin and documentation: https://github.com/gatsbyjs/gatsby-source-shopify
Make sure to install the new one following the directions there!

Create a new Gatsby site

Before you follow these instructions you need to set up a basic Gatsby site.

In a terminal window in your projects directory run this command.

npm init gatsby

Enter a name for your site and what you would like to name the folder where your site will be created.

Now answer No (or I'll add it later) to the next question 'Will you be using a CMS?' Seems a little unintuitive as you will be using Shopify later but for now choose No.

Next choose No (or I'll add it later) for 'Would you like to install a styling system?

For the next question I only chose 'Add responsive images' but I'm assuming it is safe to choose other options. Choose your options and scroll down to select Done.

You should then see this - choose Yes and go.

Gatsby will go ahead and install

If all goes well you should see something like this once Gatsby has installed

// cd into your project directory. Start the new Gatsby site 
cd gatsby-shopify-site

// Start the development server
npm run develop

I had something else running at port 8000 so it gave me the option to use 8001 but you should be able to run your site at port 8000

At http://localhost:8001 I can see my Gatsby site (yours should be at http://localhost:8000

Now exit the site by running control X C on a mac in your terminal. This should take you back to the command prompt

Install this plugin to your Gatsby site

npm i gatsby-source-shopify@rc gatsby-plugin-image

Then you need to add the plugin to your gatsby-config.js file

gatsby-config.js is at the root of your project

Add the plugin using this code

require("dotenv").config();

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-shopify",
      options: {
        apiKey: process.env.SHOPIFY_ADMIN_API_KEY,
        password: process.env.SHOPIFY_ADMIN_PASSWORD,
        storeUrl: process.env.SHOPIFY_STORE_URL,
      },
    },
    "gatsby-plugin-image",
  ],
};

Your gatsby-config.js should now look like this

Here is the code for the above

require("dotenv").config();

module.exports = {
  siteMetadata: {
    title: "Gatsby Shopify Site",
  },
  plugins: [
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-shopify",
      options: {
        apiKey: process.env.SHOPIFY_ADMIN_API_KEY,
        password: process.env.SHOPIFY_ADMIN_PASSWORD,
        storeUrl: process.env.SHOPIFY_STORE_URL,
      },
    },
    "gatsby-plugin-image",
  ],
};

How to connect to Shopify and retrieve the information

Create a trial Shopify account or of course use your existing account.

To connect Gatsby to Shopify you need to provide the -

SHOPIFY_ADMIN_API_KEY

SHOPIFY_ADMIN_PASSWORD

SHOPIFY_STORE_URL

Find this information in the Shopify admin.

Navigate to the Apps page on Shopify -

Click on Manage Private Apps

Click on 'Create new private app' button

Add a name (this is not important) and email address

Open up the Active Permissions For This App section and set Products, Product listings and Orders to Read Access

Read access for Products
Read access for Product listings if you want to use Shopify's Product Collections in your Gatsby site
Read access for Orders if you want to use order information in your Gatsby site

Click the Save button and then click Create app to create your Private Shopify App. From there you can copy the API Key and Password from the Private app page and add them to your environment file for SHOPIFY_ADMIN_API_KEY and SHOPIFY_ADMIN_PASSWORD respectively.

When the private app has been created on the next page you should see your API Key and Password. These are the two things you need to add to your environment along with your store URL.

Create your .env file

In the root of your project create the hidden file .env to store your private access keys and add the API Key, password and store URL to this file

SHOPIFY_ADMIN_API_KEY=*******************************
SHOPIFY_ADMIN_PASSWORD=************************************
SHOPIFY_STORE_URL=yourstorename.myshopify.com/

The .env file is referenced by adding require("dotenv").config(); at the top of gatsby-config.js

require("dotenv").config();

You should now see the additional Shopify fields showing up in your GraphQL playground at -

http://localhost:8001/___graphql (or of course for you it is likely to be at http://localhost:8000/___graphql

Note: Apologies that I don't have screenshots for this final part but when I returned to create them my trial period with Shopify had come to an end.

By the way if you need some extra time to develop your site and your trial period has come to an end (14 days I believe) it's worth asking Shopify if they can extend it - they extended mine by an additional 14 days. But it would be nice if Gatsby could actually talk to Shopify and arrange a special developer version of the Shopify trial - I'm not using Shopify or Gatsby now because my trial at Shopify has come to an end and I can't justify paying out for a full Shopify account at this stage.

Photo by Marvin Meyer on Unsplash

Sanity CMS Error: Failed to communicate with the Sanity API

Graeme T-Gill — Sun, 27 Jun 2021 11:04:33 +0000

I’ve recently started using the Sanity Content Management System and came across a particular error.

Running $sanity init in my studio folder I encountered this -

Graemes-MacBook-Pro:studio graeme$ sanity init
You're setting up a new project!
We'll make sure you have an account with Sanity.io. Then we'll
install an open-source JS content editor that connects to
the real-time hosted API on Sanity.io. Hang on.

Press ctrl + C at any time to quit.

Prefer web interfaces to terminals?
You can also set up best practice Sanity projects with
your favorite frontends on https://sanity.io/create

Looks like you already have a Sanity-account. Sweet!


Error: Failed to communicate with the Sanity API:
Unauthorized - Session not found. For more information, see https://docs.sanity.io/help/cli-errors.
    at /usr/local/lib/node_modules/@sanity/cli/bin/sanity-cli.js:4318:3725
    at async e.default (/usr/local/lib/node_modules/@sanity/cli/bin/sanity-cli.js:4318:3549)

It’s strange because it recognises that you’re logged in but then says it can’t authorize a connection to the Sanity API.

I tried a number of things and I’m still not sure why this was happening.

I fixed it by simply logging out of the Sanity CLI in the terminal and then logging back in again. As always turning something off and then back on again is worth a try.

Graemes-MacBook-Pro:studio graeme$ sanity logout
Logged out
Graemes-MacBook-Pro:studio graeme$ sanity login

Photo by Steve Johnson on Unsplash

Replace (Blank) with 0 in Power BI

Graeme T-Gill — Tue, 26 Jan 2021 10:48:45 +0000

I recently did a bit of work in Power BI and came across this issue :

An unsightly (Blank) being displayed whenever a numeric value is zero.

What you really want of course is to see a 0 when it is zero. I put up with it for a while but eventually had to look for a solution.

I experienced this in particular when narrowing a date range filter, so I have used that as an example here.

Use a measure to replace the (Blank) with 0

Add a new measure (Power Query) to the table via the ‘New Measure’ button.

Include the field name that has the (Blank) value — in this case it is ‘Credit’.

(My table name in this example is called ‘Quick Books’).

Measure name = IF(
ISBLANK(COUNT('Quick Books'[Credit])),
0,
COUNT('Quick Books'[Credit]))

This by default calls the measure name ‘Measure Name’ and it shows up as a field in your field list on the right-hand side.

And of course change to use your own field names

Replace ‘Measure name’ with your own name.

Replace ‘Quick Books’ with your table name.

Replace ‘Credit’ with your field name.

Save/Commit the measure

Click on the tick next to the measure to commit.

Replace original field with the measure

To actually get it to use the new measure select the ‘Numeric Value’ visual and replace the original field name (Credit) with the measure (Measure name).

As expected when we increase the date range the correct values are still displayed:

From (Blank) to 0 to hero!