Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Learn Gatsby

This lesson walks through how to update and query frontmatter data for Gatsby blog posts in order to display featured articles separately from recent articles.

Display Featured Articles through Frontmatter Properties on a Gatsby Blog

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

It's possible to pass configuration parameters to your Gatsby plugin. One use case is just allow the plugin to be used multiple times creating different queries that will be available for your site.

To do this you need to refactor the origin plugin code to accept this parameters and update the `gatsby-config.js` file to set them there.

Use configuration parameters for a Gatsby source plugin

Es posible pasar parámetros que ayuden a configurar tu plugin de Gatsby. Uno de sus caso de uso es permitir que el plugin se utilice multiples veces creando diferentes consultas que estarán disponibles para tu sitio.
Para esto es necesario refactorizar el plugin original para aceptar estos parámetros que son configurados mediante el archivo `gatsby-config.js`

Utilizar parámetros de configuración en un plugin para Gatsby

The plugin that you just implemented, each created node contains an attribute call `artwork_url` that references an URL for an external image. Is possible to directly use that URL to load the images in your site, but the images can big big and take too much time to load. You can optimize this images directly in your plugin to allow the site that use it to drop it directly into `gatsby-image`.


To accomplish the goal of optimizing the external images, your plugin will have to create a new type of node. This new file node will allow the user of your plugin to harness the power of the plugins `gatsby-plugin-sharp` and `gatsby-transformer-sharp` to perform transformations over the image field.


Optimize Remote Images in a Gatsby Source Plugin

En el plugin que has implementado, cada nodo creado contiene un atributo `artwork_url` que hace referencia a la url de una imagen externa. Es posible usar esa URL directamente para cargar las imágenes en tu sitio, pero estas pueden ser muy grandes y tomar mucho tiempo en cargar. Pero es posible optimizar dichas imágenes directamente en el plugin para que el sitio que utilice tu plugin pueda utilizar directamente  `gatsby-image`.


Para lograr optimizar las imágenes externas tu plugin tendrá que crear un nuevo tipo de nodo. Este nuevo nodo tipo archivo permitirá al usuario de tu plugin usar los plugins `gatsby-plugin-sharp` y `gatsby-transformer-sharp` para realizar transformaciones en la imagen.


Optimizar images remotas en un plugin fuente para Gatsby

A collection of lessons that describe how to create a Gatsby source plugin from scratch to npm

Creating a Gatsby Source Plugin

In this lesson, we'll create a new custom React Hook that we'll use to make a GraphQL query to request data that we custom sourced from the PokeAPI. We'll walk through migrating our useStateQuery Gatsby hook to our new custom hook, configuring our output of the custom hook, and using it to access our custom sourced data.

Create a Custom React Hook Using Gatsby’s useStaticQuery to Query Custom Sourced Data

In this lesson, we'll walk through using Gatsby's useStaticQuery React Hook to request data that we custom sourced from the PokeAPI. We'll copy over a GraphQL query from our GraphQL explorer, clean up the data, and use it to populate Pokemon in our app.

Use Gatsby’s useStaticQuery React Hook to Query Custom Sourced Data for a Web App

Crearás tu propio plugin de fuentes (source plugin) para gatsby para obtener datos de una fuente externa disponible por medio de una API Rest. El plugin integrará los datos como nodos de gatsby y creará las consultas graphql necesarias para ser utilizadas en tu sitio.

Para crear un plugin de fuentes utilizaremos algunos de los métodos que la API de gatsby provee como `sourceNodes`, `createNode`,`createNodeId` y  `createContentDigest`

Crear un plugin de gatsby para consumir datos de una API externa

You will create your own source plugin for gatsby to get external data avaialable through a REST API into gatsby. The plugin will retrieve the data and create the gatsby nodes to make the data available through the gatsby graphql queries so you can use the data into your site.

To create this source plugin you will use some of the methods provided by the gatsby API like `sourceNodes`, `createNode`, `createNodeId` and  `createContentDigest`

Create a Gatsby Source Plugin to Consume an External REST API

Learn how to use the features of `gatsby-theme-blog` version 2.0.

Blog Theme 2.0

Set up `gatsby-theme-blog` in order to add pre-built blog functionality to your Gatsby site.

Install and Configure Gatsby Blog Theme

Use the built-in `prismPreset` option to add prism highlighting to `gatsby-theme-blog`.

Note that this is only available in Blog Theme 2.0 and beyond.

Add Prism Highlighting to a Gatsby Blog Theme site

In this lesson, you'll learn how to use Gatsby's GraphQL explorer GraphiQL in order to query your data. We'll walk through starting up the Gatsby development server which starts up GraphiQL and how to use it to make a basic query, explore custom Pokemon data sourced in Gatsby, and generate a code snippet of that query to use in our app.

Use Gatsby’s GraphQL Explorer GraphiQL to Query and Browse Your Custom Sourced Data

In this lesson, you'll learn how to create custom nodes in Gatsby sourced from data from the PokeAPI. We'll walk through making Gatsby's API available through createNode and how to use it to make our data available to query in GraphQL. 

Create and Source Custom Nodes from Data in Gatsby with createNode

In this lesson, you'll learn how to request custom data in Gatsby in order to later source it for your application. We'll walk through configuring a sourceNodes export in gatsby-node.js and using the node-fetch package to request a list of Pokemon from the PokeAPI.

[PokeAPI](https://pokeapi.co/)

Request Data from a Custom API Endpoint to Source Nodes in Gatsby with gatsby-node.js

The Gatsby ecosystem supports a ton of plugins that allow you to easily source data from a variety of sources like a GraphQL CMS or Wordpress. But what if you wanted to source your own custom data?

In this collection, we'll walk through learning how to source custom data and create nodes in Gatsby in order to build out a Pokedex using the PokeAPI. We'll learn how to request the data in Gatsby's build process, create nodes with that data, query that data, and use it to create a Pokemon Pokedex UI.

Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex

This lesson explains how to automatically set up a full blog on Gatsby Cloud, with just a few clicks of a button. You can have a Github repository, Contentful workspace with content types of Blogposts, and Authors all set up from Gatsby Cloud. You can also leverage on Incremental Builds and other performance, build time advantages available on Gatsby Cloud



Automatically Create a Blog on Gatsby Cloud with Contentful CMS

Unlike Next.js, Gatsby doesn't come with any way to include serverless functions (AKA "API Routes"). Fortunately, Netlify Functions offers the same functionality, with just a bit of setup.

This video shows how to configure an existing Gatsby site deployed through Netlify to enable functions, and how to test them locally. After following the steps in this video, you'll be all set up to add your own functions for a drop-in backend based on AWS Lambda.

Enable Netlify Functions for Gatsby Development

This lesson explains how to set up a Gatsby site using a Contentful CMS on Gatbsy Cloud, it shows the correct way to enable incremental builds on Gatsby Cloud and the performance and build time advantages of this Gatsby Cloud feature. 

Set up a Gatsby Site for Incremental Builds with Contentful CMS on Gatsby Cloud

In this lesson, we'll our TakeShape CMS project to update the content of our Gatsby website. We'll walk through adding a new content scheme in TakeShape, adding the content to that page scheme, and using GraphQL to query our new content to create a new page in Gatsby.

Add New Content to a Gatsby Website with TakeShape CMS and Query it with GraphQL

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


Gatsby

Build a Developer Blog with Gatsby

Search Results