News Articles gatsby

(Gatbsy-React) Dynamic Path: how persist pages dynamically created with API to be crawled by Google Bot, and visited directly by users

I have this big issue. I have developed a Gatsby website for the car parts market. The users can select car model and part type and receive a page with the parts for their specific car. I have used React Route to create dynamically the new path and an API that recall the data: https:/{}/{} […]

Is there a way to reduce defining and exporting language queries when building pages with i18next translations?

I currently have n number of Pages. In each of them I’m defining the following query… export const languageQuery = graphql` query($language: String!) { locales: allLocale(filter: { language: { eq: $language } }) { edges { node { ns data language } } } } `; …in each Page to fetch the translations. It’s the […]

Custom style on navbar when a section is active on the same page in Gatsby

I am very new to the whole computer programming and web development field, started 6 weeks ago. I am trying to create a simple landing page with Gatsby (followed a few YouTube tutorials). As per the title I have tried to get the active section heading (in the navbar) be highlighted (change color) when the […]

Gatsby – create pages output as flat hierarchy

I have a Gatsby website (v3.10.2) where I’m creating pages using the createPage api. Here is my code in create-pages.ts for reference: function createPages({ actions: { createPage } }) { const pagesList = [ { path: ‘/’, component: LandingTemplate, context: {}, }, { path: ‘/about’, component: AboutUsTemplate, context: {}, }, ] // 404 — Always […]

Gatsby Failing to build static pages

I have been building a custom Shopify and Netlify CMS page with Gatsby. The dev builds have been fine. But when I try to deploy to Netlify it is failing to load the /about page. And I cannot figure out why. It keeps pointing to my useCart() function, which is weird because the about page […]

ERROR #95313 Building static HTML failed for path "/" on Gatsby Build while on Gatsby Develop there is no error. Tried everything but not resolved

this is the error I am getting on terminal this is my index.js Source: React – Stack Overflow

Mapping array in React JS

In a react / gatsby / wordpress project, I need to pull data from a 3rd party, non-graphql API. I am attempting to parse the data returned from this API and make it available for use with graphql. I’m following the accepted answer in this post: GatsbyJS getting data from Restful API The error I’m […]

How to reference graphQL outside of return statement in React.Js/Gatsby ? Syntax?

So I’m trying to use contentful as a back end for my website and want to define all my media files. Normally when I plug in contentful I make the query from graphQL and state is using {} notations. such as: {data.allContentfulMyContent.edges[1].node.audioSlump.file.url} The trouble is, I want to reference that specific API call outside of […]

How to stop screen scrolling when page navigation links are clicked, React-Bootstrap and Gatsby

What’s happening is if I scroll down to the bottom of the home page, click "Rental" in the nav, then click the logo in the nav to go back to the home page, the home page scrolls down to the bottom of the page rather than staying at the top (what would be expected). This […]

Why is media query only reading the first CSS selector listed?

In my global.css file I have the following: /* make .btn-light match .btn-dark styles when in dark mode */ @media (prefers-color-scheme: dark) { .btn-light { background-color: #3b3b3b; border-color: #3b3b3b; } .btn-light:hover { /*color: #fafafa;*/ background-color: #323232; border-color: #2f2f2f; } } Only the styles in the first selector show up, i.e. the :hover styles do not […]

Custom Navbar in Gatsbyjs

I am having an issue with a custom navbar. I ain’t going to lie, I did copy it but I wanted to make it better. The issue specifically I am having is on the mobile side. When I click a link in the navbar, the navbar menu doesn’t disappear. It stays out and the page […]

REAC and Gatsby website not displaying on my localhost for Chrome and Edge, showing fine with FireFox and Explorer

In my local machine running Gatsby React website, for Chrome and Edge. I’m getting the following error: Uncaught SyntaxError: Invalid regular expression: /s*,s*/: Regular expression too large commons.js:243987 Microsoft Edge Version 95.0.1020.30 Chrome Version 95.0.4638.54 (Official Build) (64-bit) It’s showing fine on Firefox and even display on explorer. Hope if someone has the same issue […]

onMouseEnter and onMouseLeave to animate multiple Lottie icons in Gatsby

I have written the following code to animate three Lottie icons in a Gatsby project. The code works as expected: the icon starts moving when the user hovers on the element and stops playing when the element is not hovered anymore. Is there a way though to reuse the same function for onMouseLeave and onMouseEnter […]

Creating an Observer component in GatsbyJS – Passing props to the children

I’m looking to build an intersection observer component in a personal Gatsby project. The reason for it is the animation and trigger is the same in different areas of the site. What I have so far: // Observer.js import React, { useEffect, useRef } from "react"; import { useAnimation } from "framer-motion"; const Observer = […]

Gatsby Dynamic Routing URL for Generating Layouts

So I generate conditional layouts with this code: exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions; if (page.path.match(/about/)) { page.context.layout = "special"; createPage(page); } if (page.path.match(/projects/)) { page.context.layout = "projectsPage"; createPage(page); } }; I want to change the page.path.mathch(/projects/TO ALL PROJECT SLUGS/) but I can’t write the correct syntax […]

Importing YouTube API Into Gatsby Unexpected Token

using the Youtube api i’m getting the following message when running the site. The site should load the youtube video however, I’m getting the following error message. unexpected token ‘<‘ No codeFrame could be generated var scriptUrl = ‘ widgetapi.vflset/www-widgetapi.js’; try { var ttPolicy = window.trustedTypes.createPolicy("youtube-widget-api", { createScriptURL: function(x) { return x } }); scriptUrl […]

Gatsby – Layout in wrapPageElement does not update state

I am having issues with wrapPageElement in my Gatsby 4 project. wrapPageElement.js import React from ‘react’; import { PathProvider } from ‘./src/providers/path’; import Layout from ‘./src/components/layout/layout’; // Pass all props (hence the …props) // to the layout component so it has access to things like pageContext or location const wrapPageElement = ({ element, props: { […]

How can I dynamically re-render pagination controls?

I am working on a pagination component that displays cards with information regarding medical conditions. There are a maximum of 9 cards displayed per "page", and a maximum of 6 of the numbered buttons that go in-between the next & previous buttons. When you first land on the page, it looks like this: I am […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.