Posts tagged #gatsby

📝 ✨ ~ End of summer, end of Gatsby?

Mon, 28 Aug 2023 00:00:00 GMT

School has started here in Norway, the #SummerOffice is closed until next year, and Labour Day Weekend is coming up in the US.

All pointing toward the end of summer in the northern hemisphere, and maybe even the end of Gatsby?

Last week FredKSchott (co-creator of Astro - kinda biased fella come to think of it) stated:

And wardpeet, former tech lead at Gatsby, answered:

The "Gatsby is dead" sentiment spread like wildflowers in the community.

However, Netlify followed up with:

What we do know is that Gatsby Cloud will be shutting down.

For all Gatsby Cloud Free plan customers, your Gatsby Cloud instance will be discontinued on September 29, 2023.

We also know that Gatsby powers 19% of Netlify's enterprise customers - enterprise is where the money's at! Twitter-devs making blogs and portfolios, not so much.

This summer, Netlify shipped adaptors, making it possible for any hosting provider to run full-featured Gatsby sites. Before acquiring Gatsby, Netlify had to reverse engineer SSR, DSR, etc.

I am still hopeful that we'll see Gatsby evolve, but I'll be looking into Astro while also spending some more time tinkering with good old Node.

Totally feel the vibe of this post doing its rounds on Twitter.

What are you up to this fall? Any projects got you extra excited? Let me know!

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

📝 ✨ ~ Gatsby is back — v5.9 and a new Source Plugin tutorial

Thu, 27 Apr 2023 00:00:00 GMT

It seems the dust has settled on the Netlify acquisition of Gatsby. Last week Gatsby released the first version since February Gatsby v5.9, and Lennart published a new and comprehensive tutorial on how to create a Source Plugin 📝

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

📝 ✨ ~ When to use GATSBY_

Fri, 17 Mar 2023 00:00:00 GMT

Use GATSBY_ for environmental variables (env vars) you use in your client-side code. In practice, that would be almost all of your code. The exceptions are code inside gatsby-node.js, gatsby-config.js, and a page's getServerData or config.

Exposing all env vars on the client would be a major security hazard. We use env vars for things such as API secrets, etc.

XATA_API_KEY=xau_werIJslsdf8wekfsflr06ZxzyYYVpsMF6
GATSBY_RECAPTCHA_SITE_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

📝 ✨ ~ Source Usage Data for Social Proof on Your Gatsby Site

Tue, 14 Mar 2023 00:00:00 GMT

Learn how to create a social proof section like the one we added to pruneyourfollows.com, a tool to help you clean up your Twitter timeline:

Read the rest on the Gatsby Blog ➡️

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.
Queen Raae and family worked on several projects for Xata.

📝 ✨ ~ Netlify + Gatsby sitting in a tree...

Wed, 01 Feb 2023 00:00:00 GMT

Breaking news: Netlify Acquires Gatsby 🤯

The funny thing is I talked about JavaScript framework business models with pirate @tujoworker when meeting him in real life earlier in the day.

It seems to me they are betting on Valhalla. Still, they also promise to be "good stewards of the Gatsby open-source project and the maintainers will join the open source group together with the creators of frameworks like Solid JS and Eleventy."

Time will tell!

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

📝 ✨ ~ Moar logs with gatsby build/develop --verbose

Thu, 12 Jan 2023 00:00:00 GMT

Gatsby has its own reporter helper giving us 5 log levels: verbose, info, warn, error and panic.

By default when using gatsby develop and gatsby build you'll see all but the verbose messages.

But sometimes it can be beneficial to see moar logs, and you can turn on the verbose messages by using the flag verbose: gatsby develop --verbose or gatsby build --verbose.

Enabling verbose logging will for instance give you an overview of your nodes:

verbose Number of node types: 13. Nodes per type: Directory: 230,
  File: 384, ImageSharp: 159, Landing: 12, MarkdownRemark: 215,
  OlaVeaEmail: 18, QueenEmail: 162, Site: 1, SiteBuildMetadata: 1,
  SitePage: 381, SitePlugin: 67, Talk: 6, TestimonialsYaml: 12

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

📝 ✨ ~ React Query pagination with Gatsby (File System Route API)

Wed, 04 Jan 2023 00:00:00 GMT

For Prune your follows, we already had an URL structure for filters like this:

But for most filters, there are more than 60 accounts, so we added pagination by:

Capturing the page number using the Gatsby File System Route API 1️⃣
Extending the React Query cache key with the page number 2️⃣
Calculating an offset using the page number 3️⃣
Passing along the offset with our query for filtered accounts 4️⃣

// ./src/pages/app/filter/[filter]/[...page].js 👈👈👈 1️⃣

import React from "react";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";

export default function SearchPage(props) {
  const pageIndex = parseInt(props.page) || 0;
  const size = 60;
  const offset = pageIndex * size; //👈👈👈 3️⃣
  const { data } = useQuery({
    queryKey: ["accounts", props.filter, props.page], // 👈👈👈 2️⃣
    queryFn: ({ signal }) =>
      axios.get("/api/accounts", {
        params: {
          size: size,
          filter: props.filter,
          offset: offset, //👈👈👈 4️⃣
        },
        signal: signal,
      }),
    select: (result) => result.data,
  });

  return (
    <ul>
      {(data?.records || []).map((record) => (
        <li key={record.accountId}>
          {record.name} @{record.username}
        </li>
      ))}
    </ul>
  );
}

If "capturing the page number using the Gatsby File System Route API" made no sense, then Url-based (client-side) pagination with Gatsby is for you.

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

📝 ✨ ~ Source app usage for social proof on a Gatsby website

Sun, 18 Dec 2022 00:00:00 GMT

On this week's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby we added we added usage stats to Prune your Follows.

The Why

It's one way to show "social proof". Other ways are testimonials, reviews, the little avatars that are also present in the screenshot above, and more. Its purpose: Show potential users that it will be okay. Loads of people have already trusted us!

The How

1️⃣ We queried Xata, our serverless database, for aggregated data,
2️⃣ created a Gatsby data node to hold the information,
3️⃣ and used a static Gatsby query to get hold of the information in our component.

// File: /.gatsby-node.js

exports.sourceNodes = async (gatsbyUtils) => {
  const { reporter, actions, createNodeId, createContentDigest } = gatsbyUtils;
  const { createNode } = actions;

  // 1️⃣ Query Xata
  const result = await xata.db.accounts.aggregate({
    unfollowsTotal: {
      count: {
        filter: {
          //There is some older test data in there
          unfollowed: { $ge: new Date("2022-11-03") },
        },
      },
    },
    usersTotal: {
      uniqueCount: {
        column: "followed_by",
      },
    },
  });

  const statsData = {
    unfollowedCount: result.aggs.unfollowsTotal,
    userCount: result.aggs.usersTotal,
  };

  // 2️⃣ Create Node
  createNode({
    id: createNodeId("statistics"),
    ...statsData,
    internal: {
      type: "Statistics",
      contentDigest: createContentDigest(statsData),
    },
  });
};

// File: ./src/domain/marketing/Stat.js

import React from "react";
import { useStaticQuery, graphql } from "gatsby";

export function Stats() {
  // 3️⃣ Use in component
  const data = useStaticQuery(graphql`
    query {
      statistics {
        unfollowedCount
        userCount
      }
    }
  `);

  return (
    <section>
      Users: {data.statistics.userCount}
      Unfollows: {data.statistics.unfollowedCount}
    </section>
  );
}

Check out the pull request for the complete example, including the tailwind design for the component.

All the best,
Queen Raae

Queen Raae and family worked on several projects for Xata.
Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

📝 ✨ ~ Url-based (client-side) pagination with Gatsby

Thu, 01 Dec 2022 00:00:00 GMT

I like to be able to refresh my browser, use the back button or bookmark a page without losing context. So for Prune your follows, we already had an URL structure for filters like this:

Keeping the selected filter in the URL makes all the use cases mentioned above possible.

The Gatsby File System Route API does the heavy lifting for us, automagically surfacing the selected filter as a page prop:

// File: ./src/pages/app/filter/[...filter].js 👈👈👈

import React from "react";

export default function FilterPage(props) {
  return (
    <main>
      <p>Your selected filter is {props.params.filter}</p>
      {/* OR */}
      <p>Your selected filter is {props.filter}</p>
    </main>
  );
}

The path /app/filter/unfollowed in the above example prints out "Your selected filter is unfollowed" twice as I wanted to show that the selected filter is available both in props.filter and props.params.filter.

For pagination, we need to add another level in our file system:

// ./src/pages/app/filter/[filter]/[...page].js 👈👈👈

import React from "react";

export default function FilterPage(props) {
  return (
    <main>
      <p>
        Your selected filter is {props.filter}, <br />
        and your selected page is {props.page}
      </p>
    </main>
  );
}

/app/filter/unpopular => "Your selected filter is unpopular, and your selected page is"
/app/filter/overactive/3 => "Your selected filter is overactive, and your selected page is 3"

BTW: These values are strings (or undefined), so it might be a good idea to convert the page into a pageIndex right away and add a sensible default:

// ./src/pages/app/filter/[filter]/[...page].js

import React from "react";

export default function FilterPage(props) {
  const pageIndex = props.page ? parseInt(props.page) : 0; 👈👈👈
  return (
    <main>
      <p>
        Your selected filter is {props.filter} <br />
        and your selected page is {pageIndex}
      </p>
    </main>
  );
}

With the above changes:

/app/filter/unpopular => "Your selected filter is unpopular, and your selected page is 0"

All the best,
Queen Raae

PS: There is a follow up showing pagination in tandem with React Query

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

⛔️ 🏗 ~ Stop the build with `reporter.panic`

Wed, 31 Aug 2022 00:00:00 GMT

On last week's show, we sourced data from Supabase in the form of little avatars.

If the sourcing fails though, we'll get problems down the road with the Avatars component:

Cannot query field "allUserAvatar" on type "Query"

It would be better to fail as fast as possible, and you may do so with reporter.panic.

// File: gatsby-node.js

const { createClient } = require("@supabase/supabase-js");

const supabaseUrl = process.env.GATSBY_PUBLIC_SUPABASE_URL;
const supabaseServiceKey = process.env.SUPABASE_SERVICE_KEY;

const serviceSupabase = createClient(supabaseUrl, supabaseServiceKey);

exports.sourceNodes = async (gatsbyUtils) => {
  const { actions, createNodeId, createContentDigest, reporter } = gatsbyUtils;
  const { createNode } = actions;

  const { data, error } = await serviceSupabase
    .from("avatars")
    .select("username, avatar_url")
    .limit(20);

  if (error) {
    // 👇👇👇 Stops the build
    reporter.panic("No avatars sourced", error);
  }

  data.forEach((item) => {
    createNode({
      id: createNodeId(item.username),
      avatarUrl: item.avatar_url,
      username: item.username,
      internal: {
        type: "UserAvatar",
        contentDigest: createContentDigest(item),
      },
    });
  });
};

Read more about the reporter helper in the Gatsby Docs.

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

🏝 🗓 ~ This week around the Gatsby islands

Mon, 29 Aug 2022 00:00:00 GMT

Yesterday I got to meet long-term internet friend Monica Lent, of Blogging for devs fame. If you haven't signed up for her free email course yet, you are in for a treat.

Hopefully, I get to meet many more internet friends IRL before the year ends as I'llI'll be speaking at the Jamstack Conf in San Fransisco and then at Modern Frontends in London 🎉

Gatsby is hyping the Data Layer these days. Coincidently my favorite part of Gatsby, so I am all for that. I am eager to get my hands on Runtime GraphQL for instance.

Runtime GraphQL. By far the most requested feature for the data layer! Soon you'll be able to query GraphQL — not just at build time — but from functions and during SSR.

Read Kyle Mathews blog post for more Data Layer goodies.

There have been five minor Gatsby releases while I've enjoyed the summer 🤯 Check out the release log to get up to speed. But here are some of my favs:

gatsby-plugin-mdx v4
Gatsby Head API - Better performance & more future-proof than react-helmet
Server Side Rendering (SSR) in development

Our streaming schedule this week

🔴 🏴‍☠️ Refactor from React Helmet to the new Gatsby Head API · #GatsbyJS Deep Dive
— Thursday, September 1st @ 19:00 CEST

Other events

Make Static Pages Dynamic With Netlify Edge Functions (Learn with Jason)
— Tuesday, August 30th @ 19:30 CEST

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

🗂 🏴‍☠️ ~ Source data (avatars) into the Gatsby Data Layer from a Supabase table

Fri, 26 Aug 2022 00:00:00 GMT

On yesterday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands, we refactored the little avatar section on Prune your follows from client-side to server-side rendering!

PR: If you did (or do) watch the show, you'll see that I have sneakily done some cleaning up and solved our little environment variable problem by making sure I load them in the gatsby-config 🤦‍♀️ 🤪

The What?

Source data from the avatars table on build, so that the little avatars are present as part of the statically generated version of the marketing page.

The Why?

It gets rid of the tiny flicker of no content, and why call Supabase every time someone lands on the marketing page for Prune your follows when there is no need? You can also use your service key when sourcing, allowing you to even information from otherwise locked down table rows.

The How

Fetch data on avatars using the Supabase SKD this time
Create a Gatsby node for each avatar using createNode, createNodeId and createContentDigest.

The Code

// File: gatsby-node.js
// Note: Error handling omitted

const { createClient } = require("@supabase/supabase-js");

const supabaseUrl = process.env.GATSBY_PUBLIC_SUPABASE_URL;
const supabaseServiceKey = process.env.SUPABASE_SERVICE_KEY;

const serviceSupabase = createClient(supabaseUrl, supabaseServiceKey);

exports.sourceNodes = async (gatsbyUtils) => {
  const { actions, createNodeId, createContentDigest, reporter } = gatsbyUtils;
  const { createNode } = actions;

  const { data } = await serviceSupabase
    .from("avatars")
    .select("username, avatar_url")
    .limit(20);

  data.forEach((item) => {
    createNode({
      id: createNodeId(item.username),
      avatarUrl: item.avatar_url,
      username: item.username,
      internal: {
        type: "UserAvatar",
        contentDigest: createContentDigest(item),
      },
    });
  });
};

And voila, we have avatar nodes in the data layer we may use in the Avatars component:

// File: Avatars.js
// Note: Styling omitted

import React from "react";
import { useStaticQuery, graphql } from "gatsby";

export function Avatars() {
  const data = useStaticQuery(graphql`
    query {
      allUserAvatar {
        nodes {
          username
          avatarUrl
        }
      }
    }
  `);

  return (
    <div>
      {data.allUserAvatar.nodes.map((user) => {
        return (
          <img key={user.username} src={user.avatarUrl} alt={user.username} />
        );
      })}
    </div>
  );
}

To see the entire app code, check out its GitHub repository.

All the best,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

🏴‍☠️ 📺 ~ Join us for the first show of the season

Thu, 25 Aug 2022 00:00:00 GMT

Friendly reminder that we are back today with our unauthorized and rum-fueled treasure hunts in the sharky waters around the Gatsby island.

Onboarding the ship this season are great folks like Colby Fayock (Astrocoder & Developer Advocate), Josh Johnson (Engineer at Gatsby), and more.

Make sure to sign up for reminder emails sent 30 minutes before we go live so you don't miss out 📬

We will source these little avatars on today's show from a Supabase table into the Gatsby Data Layer to make them statically generated! At the moment, these are fetched client side.

Hope to see you there,
Queen Raae

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.