Как добавить API-скрипт (из Dribble) на мой сайт Gatsby

Question

Я пытаюсь разместить мои посты Dribble на моем сайте Gatsby.

Я следовал руководству по этой статье https://medium.com/@nithin_94885/dribbble-shots-in-your-website-v2-api-5945a355d106,, где сгенерировал свой токен доступа из Dribble (уникальный код, позволяющий моему сайту gatsby получать доступ к моим сообщениям по дриблингу).

IЯ не могу понять, где добавить скрипт, который вызывает API на моем сайте Гэтсби.

Я пытался вставить его в мой файл gatsby-node.js (в прошлом я думал, что именно туда должен идти сценарий)

Я довольно новичок .. если сценарий, которыйвызывает Dribble API выглядит следующим образом:

// Set the Access Token
var accessToken = '9f061d26c5a8be96b17a81718959a67dd54ca9669ca41752777193f7cc5be7c3';

// Call Dribble v2 API
$.ajax({
    url: 'https://api.dribbble.com/v2/user/shots?access_token='+accessToken,
    dataType: 'json',
    type: 'GET',
    success: function(data) {  
      if (data.length > 0) { 
        $.each(data.reverse(), function(i, val) {                
          $('#shots').prepend(
            '<a class="shot" target="_blank" href="'+ val.html_url +'" title="' + val.title + '"><div class="title">' + val.title + '</div><img src="'+ val.images.hidpi +'"/></a>'
            )
        })
      }
      else {
        $('#shots').append('<p>No shots yet!</p>');
      }
    }
});

и мой файл gatsby-node.js выглядит следующим образом:

const path = require('path');
const { createFilePath } = require('gatsby-source-filesystem');

// Look at every node when it is created
exports.onCreateNode = ({node, getNode, actions}) => {
    // Check for markdown nodes
    const { createNodeField } = actions;
    if(node.internal.type === 'MarkdownRemark') {
        // Create a slug out of the markdown filepath name
        const slug = createFilePath({
            node,
            getNode,
            basePath: 'projects'
        });
        // Add the newly created slug to the node itself
        createNodeField({
            node,
            name: 'slug',
            value: `/project${slug}`
        });
    }
};

exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions
    return new Promise((resolve, reject) => {
      graphql(`
        {
          allMarkdownRemark {
            edges {
              node {
                fields {
                  slug
                }
              }
            }
          }
        }
      `).then(result => {
        result.data.allMarkdownRemark.edges.forEach(({ node }) => {
          createPage({
            path: node.fields.slug,
            component: path.resolve(`./src/templates/project.js`),
            context: {
              // Data passed to context is available in page queries as GraphQL variables.
              slug: node.fields.slug,
            },
          })
        })
        resolve()
      })
    })
    };

Как добавить скрипт, чтобы скрипт APIназывать мои снимки в Dribble, чтобы ссылаться на него?

Я ожидал, что это будет легким решением, но я боролся с этой интеграцией Dribble / Gatsby уже несколько дней.(