News Articles gatsby

Gatsby/React how to render dynamic images with GatsbyImage plugin

I am able to console out the data I want after mapping through my data from my graphql query. Is it possible to render after mapping several times? const gatsbyComponent = ({ data }) => { return ( <Layout> {data.allFiles.nodes.map((item) => { Object.entries(item).map(([key, value]) => { value.map((image) => { console.log("Individual image", image) // Logs show […]

Matching query images with JSON variable in Gatsby

So, I have a JSON file that has info I’m pulling into my Gatsby project. One of those fields is an image keyword. I want to use that to call images in a "show" folder where promo images can be dumped. thisYear.json { "title": "Rope", "author": "Patrick Hamilton", "image": "rope", },{ "title": "I Hate Hamlet", […]

Slug is null with Netlify CMS and Gatsby

I’m trying to get Netlify CMS setup, and running into issues when I use it to create new markdown files. I tried to read through the docs to get it configured correctly but something doesn’t seem to be adding up. Part of the issue seems to come from the fact that I have my own […]

Is there tool for React/Gatsby/VS Code that will check case sensitivity?

like I asked in the title. I wonder if there is a tool like that becuase I lose my imports ater uploading to LINUX hosting and this might be the problem but i can’t find it manually. Source: React – Stack Overflow

Netlify Redirect or Rewrite for Gatsby Wildcard Path

So I’ve already implemented a wildcard path on my gatsby-node.js file: exports.onCreatePage = async ({ page, actions }) => { const { createPage } = actions if (page.path.match(/^/my-path/)) { page.matchPath = "/my-path/*" createPage(page) } } and this works fine when I am running the site locally (in development). i.e., if i provide /my-path/anything123 or /my-path/asdfasdfasdf, […]

CSS Border Radius doesn’t work in Safari after switching to gatsby-plugin-image

CSS Border Radius doesn’t work in Safari after switching to gatsby-plugin-image on my laptop I can see the border radius of the image, but it doesn’t seem to work on iphone or iPad. Source: CSS – Stack Overflow

In Gatsby/React modify DOM where there’s no direct access

I have a Gatsby site where I am getting content from a WordPress site. The bulk of the content comes from a Graphql query and I get it and show it on the page like this: <Grid item sm={12}> <StyledPostContent> {parse(`${singlePost.content}`)} </StyledPostContent> </Grid> Inside of this "singlePost.content" there is a piece of content wrapped around […]

Gatsby CSS loading

I have a little trouble understanding how CSS is loading with Gatsby framework. From what I read, all CSS is being processed by webpack and put in the head tag, meaning all styles for all pages will be included right after the page is loaded for the first time. Is there any way I can […]

Importing and displaying multiple images from GraphQL using gatsby-plugin-image

Hi I’m trying to add an instagram feed to my website but I can not find a way to make it work. I haven’t really used these tools before so I don’t really understand it, but made it to point where I think I have the feed in GraphQL. Now the problem is I don’t […]

The Open Source Story – Open Sourcing RudderStack Blog and Docs

It’s all About Open Source Open source is a component of almost all software development that takes place today. If you look back, the influence has been potent. For example, the main reason Python became the language most-suited for machine learning is the open-source contributors. In fact, because of the enormous size of the open-source […]

Application build is taking more time in Gatsby

I am using gatsby with contentful. And I am dynamically generating pages. My app build time is taking around 20 to 30 mins. Is any way I can reduce the time it is taking. Please note how long it is taking to build schema and bootstrapping the info. I have added the logs of the […]

gatsby and react-latex-next: pb with variables

I an trying to use a react-latex-next component in a gatsby page but i get an error (TypeError: text.search is not a function) when rendering a string from a variable. Here is my page code: import * as React from ‘react’ import ‘katex/dist/katex.min.css’ import Latex from "react-latex-next" const TestLatexPage = () => { const chaineLatex […]

How to add MDX to an Existing Gatsby Site

My previous article featured a guide for setting up a personal website using Gatsby. One of the first items on my upgrade list for this type of project is adding support for MDX, which allows the use of React components inside Markdown files. Code snippets are really important for a developer’s blog, so I like […]

How to use material UI ( V5 ) Link component in Gatsby to navigate internally

I’m trying to use the Material UI Link component with gatsby. I want to use sx prop to style the Link component and I’m trying to navigate between my gatsby pages I don’t want to use href because it calls the server and rerenders the whole thing please help Source: React – Stack Overflow

Release Radar · October 2021 Edition

What an incredible month it’s been for GitHub and our communities. Whilst we’ve been busy with GitHub Universe, our communities have been busy coding. It’s been a successful year for Hacktoberfest, with many first-time contributors to the open source ecosystem. It wouldn’t be open source without contributors, and there wouldn’t be anything to contribute to […]

React Gatsby CSP with Material-UI 5

I’m currently working on an application which is build with gatsby and uses Material Ui for the style. There is however the requirement from the client that we can’t use the unsafe-inline value for the style csp. We use the gatsby-csp-plugin for defining our CSP metadata. This plugin creates hashes for the style en script […]

stop rerendering in navbar. when I click on other navlink that time it’s rerender page I wan to stop that

when switch route link switch to navbar link that time it’s rendering and wallet connectivity was gone and I want to stop that rendering. Source: React – Stack Overflow

Error: The result of this StaticQuery could not be fetched

Overview I use the gatsby environment. Since graphql is used in gatsby, useStaticQuery is used. It works fine in the development environment(gatsby develop), In the environment after building(gatsby build && gatsby serve), an error like the title has occurred. Error Text Error: The result of this StaticQuery could not be fetched. This is likely a […]

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.