tessl/npm-gatsby

Blazing fast modern site generator for React with GraphQL data layer and plugin ecosystem

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Gatsby

Name: tessl/npm-gatsby
Author: tessl

Gatsby is a React-based framework for building blazing-fast websites and applications. It combines static site generation with modern web technologies, providing a unified GraphQL data layer, automatic performance optimizations, and a rich plugin ecosystem.

Package Information

Package Name: gatsby
Package Type: npm
Language: TypeScript/JavaScript
Installation: npm install gatsby

Core Imports

import { Link, navigate, graphql, useStaticQuery } from "gatsby";

For page components and configuration:

import type { PageProps, HeadFC, GatsbyConfig, GatsbyNode } from "gatsby";

For CommonJS:

const { Link, navigate, graphql, useStaticQuery } = require("gatsby");

Basic Usage

import React from "react";
import { Link, useStaticQuery, graphql } from "gatsby";
import type { PageProps, HeadFC } from "gatsby";

// Basic page component
const IndexPage: React.FC<PageProps> = () => {
  const data = useStaticQuery(graphql`
    query SiteMetadata {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <main>
      <h1>{data.site.siteMetadata.title}</h1>
      <Link to="/about">About</Link>
    </main>
  );
};

// Head function for SEO
export const Head: HeadFC = () => (
  <>
    <title>Home Page</title>
    <meta name="description" content="Welcome to my Gatsby site" />
  </>
);

export default IndexPage;

Architecture

Gatsby is built around several key architectural concepts:

Build-time Data Layer: All data sources are unified into a GraphQL schema at build time
Static Generation: Pages are pre-rendered as static HTML with rehydration for interactivity
Plugin Architecture: Extensible through a comprehensive plugin system for data sources, transformations, and functionality
Multiple Rendering Options: SSG (Static Site Generation), DSG (Deferred Static Generation), and SSR (Server-Side Rendering)
Performance-First: Automatic code splitting, image optimization, prefetching, and other performance optimizations

Capabilities

React Components & Hooks

Core React components and hooks for building Gatsby applications, including navigation, data fetching, and layout components.

const Link: React.ComponentType<LinkProps>;
function useStaticQuery<TData = any>(query: string): TData;
function useScrollRestoration(identifier: string): void;
const Script: React.ComponentType<ScriptProps>;

Components & Hooks

Navigation & Routing

Programmatic navigation and path utilities for client-side routing and URL management.

function navigate(to: string, options?: NavigateOptions<{}>): Promise<void>;
function withPrefix(path: string): string;
function prefetchPathname(pathname: string): void;

Components & Hooks

GraphQL Integration

Template tag and utilities for defining and executing GraphQL queries in pages and components.

function graphql(query: TemplateStringsArray, ...args: any[]): string;

GraphQL Integration

Configuration APIs

Comprehensive configuration system for site metadata, plugins, build settings, and deployment options.

interface GatsbyConfig {
  siteMetadata?: Record<string, any>;
  plugins?: PluginRef[];
  pathPrefix?: string;
  trailingSlash?: "always" | "never" | "ignore";
  // ... extensive configuration options
}

Configuration

Node.js Build APIs

Server-side APIs for plugin development, page creation, data sourcing, and build-time customization.

interface GatsbyNode {
  createPages?: (args: CreatePagesArgs) => Promise<void> | void;
  sourceNodes?: (args: SourceNodesArgs) => Promise<void> | void;
  onCreateNode?: (args: CreateNodeArgs) => Promise<void> | void;
  // ... extensive lifecycle hooks
}

Node.js APIs

Browser APIs

Client-side plugin APIs for handling routing, service workers, rendering customization, and user interactions.

interface GatsbyBrowser {
  onRouteUpdate?: (args: RouteUpdateArgs) => void;
  wrapPageElement?: (args: WrapPageElementBrowserArgs) => React.ReactElement;
  onClientEntry?: () => void;
  // ... browser lifecycle hooks
}

Browser APIs

Server-Side Rendering APIs

Server-side plugin APIs for HTML generation, SEO optimization, and rendering customization.

interface GatsbySSR {
  onRenderBody?: (args: RenderBodyArgs) => void;
  wrapPageElement?: (args: WrapPageElementNodeArgs) => React.ReactElement;
  onPreRenderHTML?: (args: PreRenderHTMLArgs) => void;
}

SSR APIs

Deployment Adapters

Modern deployment adapter system for various hosting platforms with functions, redirects, and headers support.

interface IAdapter {
  name: string;
  cache: Cache;
  config: IAdapterConfig;
  initializeAdapterStore?: () => Promise<void>;
  createRoutes?: (functions?: Array<IFunctionDefinition>) => Promise<RoutesManifest>;
}

Node.js APIs

Secondary Entry Points

Gatsby provides specialized entry points for specific functionality:

gatsby/graphql - GraphQL utilities and the complete GraphQL.js library
gatsby/reporter - Logging and reporting utilities for plugins
gatsby/utils - Core utility functions like createContentDigest
gatsby/webpack - Complete Webpack library for build customization

Type Definitions

Gatsby includes comprehensive TypeScript definitions for all APIs:

interface PageProps<
  DataType = object,
  PageContextType = object,
  LocationState = WindowLocation["state"],
  ServerDataType = object
> {
  data: DataType;
  location: WindowLocation<LocationState>;
  navigate: NavigateFn;
  pageContext: PageContextType;
  params: Record<string, string>;
  path: string;
  uri: string;
  pageResources: PageResources;
  serverData?: ServerDataType;
}

type HeadFC<
  DataType = object,
  PageContextType = object,
  ServerDataType = object
> = React.FC<HeadProps<DataType, PageContextType, ServerDataType>>;

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/gatsby@5.15.x
Publish Source: CLI
Badge