Headless

A gatsby clean parancs a Gatsby projektben a cache és a generált fájlok törlésére szolgál. Konkrétan a következőket teszi:

1. Törli a cache-t

• A Gatsby által generált .cache könyvtár tartalmát törli.
• Ez a könyvtár a build folyamat során létrehozott átmeneti adatokat tartalmazza (pl. GraphQL lekérdezések eredményei, képgenerálási adatok).
• Ha ez a cache megsérül vagy elavult, előfordulhatnak hibák vagy nem kívánt viselkedések. A gatsby clean segít ezeket megoldani.

2. Törli a public mappát

• Az összesített build fájlokat tartalmazó public könyvtárat is törli.
• Ez a mappa a kész weboldal statikus fájljait (HTML, CSS, JS, képek) tartalmazza, amelyeket a build folyamat során hoz létre a Gatsby.

3. Új build alapok

• A következő build teljesen tiszta környezetben történik, újraépítve minden fájlt és adatot.
• Ez különösen akkor hasznos, ha váratlan viselkedést tapasztalsz, például helytelenül renderelt komponenseket vagy elavult adatokat.

Mikor érdemes futtatni?

• Cache probléma gyanúja esetén: Ha olyan hibát tapasztalsz, amely látszólag nem a kód változásai miatt következik be.
• Új függőségek vagy pluginok hozzáadása után: Ha új függőséget vagy Gatsby plugint adsz a projektedhez, és az nem működik megfelelően.
• Deploy hibák elkerülése érdekében: Ha biztos akarsz lenni abban, hogy a build folyamat teljesen tiszta.

Hogyan használod?

Egyszerűen futtasd a következő parancsot a terminálban a projekt gyökérkönyvtárában:

gatsby clean

Utána

A gatsby clean után általában új buildet kell indítani:

gatsby develop

vagy

gatsby build

Ez biztosítja, hogy a törölt fájlokat és cache-t újra generálja a Gatsby.

gatsby-node.js

const path = require("path");
const { assignIds } = require("@webdeveducation/wp-block-tools");
exports.createPages = async ({ actions, graphql }) => {
  const pageTemplate = path.resolve("src/templates/page.js");
  const { createPage } = actions;

  const { data } = await graphql(`
    query AllPagesQuery {
      allWpPage {
        nodes {
          databaseId
          blocks
          uri
        }
      }
    }
  `);
  for (let i = 0; i < data.allWpPage.nodes.length; i++) {
    const page = data.allWpPage.nodes[i];
    let blocks = page.blocks;
    blocks = assignIds(blocks);
    createPage({
      path: page.uri,
      component: pageTemplate,
      context: {
        blocks,
      },
    });
  }
};

page.js

import React from "react";
import { BlockRendererProvider } from "@webdeveducation/wp-block-tools";

const Page = (props) => {
  console.log("Page props: ", props);
  return <BlockRendererProvider allBlocks={props.pageContext.blocks} />;
};

export default Page;

gatsby-node.js

const path = require("path");

exports.createPages = async ({ actions, graphql }) => {
  const pageTemplate = path.resolve("src/templates/page.js");
  const { createPage } = actions;

  const { data } = await graphql(`
    query AllPagesQuery {
      allWpPage {
        nodes {
          databaseId
          blocks
          uri
        }
      }
    }
  `);
  for (let i = 0; i < data.allWpPage.nodes.length; i++) {
    const page = data.allWpPage.nodes[i];
    let blocks = page.blocks;
    createPage({
      path: page.uri,
      component: pageTemplate,
      context: {
        blocks,
      },
    });
  }
};

src/templates/page.js

import React from "react";

const Page = (props) => {
  console.log("Page props: ", props);
  return (
    <div>
      <p>This is page template</p>
    </div>
  );
};

export default Page;

gatsby-node.js

const path = require("path");

exports.createPages = async ({ actions, graphql }) => {
  const pageTemplate = path.resolve("src/templates/page.js");
  const { createPage } = actions;

  const { data } = await graphql(`
    query AllPagesQuery {
      allWpPage {
        nodes {
          databaseId
          title
          blocks
          uri
        }
      }
    }
  `);
  for (let i = 0; i < data.allWpPage.nodes.length; i++) {
    const page = data.allWpPage.nodes[i];
    createPage({
      path: page.uri,
      component: pageTemplate,
      context: {
        title: page.title,
      },
    });
  }
};

src/templates/page.js

import React from "react";

const Page = ({ pageContext }) => {
  const { title } = pageContext;
  return (
    <div>
      <h1>{title}</h1>
      <p>This is page template</p>
    </div>
  );
};

export default Page;

Create a new Gatsby project

npx gatsby new headless-gatsby https://github.com/tomphill/gatsby-wordpress-gutenberg-starter

Set the endpoint in .env

WPGRAPHQL_URL = http://headless-wp-gatsby.local/graphql

Install Gatsby-CLI globally

sudo npm i -g gatsby-cli

Run

gatsby develop

Clear cache

gatsby clean