Newest 'gatsby' Questions - Stack Overflow

Questions tagged [gatsby]

Gatsby is a modern site generator for React. It focus on performance and flexible data sources.

0
votes
0answers
16 views

Images loading blurred or not loading - Gatsby and GitHub Pages

I am super new to gatsby and it's been a while since i touched any kind of web development project. I am trying to create a photography portfolio using this gatsby template https://github.com/...
0
votes
0answers
9 views

How to use AWS Amplify env vars in gatsby-config.js?

I am building an app with GatsbyJS. I am using environment variables in my gatsby-config.js. GatsbyJS app builds fine locally, by using .env.* files. However, when building from AWS Amplify it ...
0
votes
0answers
12 views

Sourcing from netlify cms

I followed the tutorial on Gatsby's site. I have the 'hello world' https://admiring-bose-8807f8.netlify.com/ site running. I've created a post but stuck getting it to show. I'm using the gatsby-source-...
0
votes
0answers
8 views

Gatsby Docz React Hooks

I'm trying to use the useDocs hook included with docz in a Gatsby.js site as documented here: https://www.docz.site/docs/gatsby-theme#getting-data and https://www.docz.site/docs/components-api#...
0
votes
0answers
13 views

Gatsby app works locally, deploys to Heroku, but doesn't load, has error “App boot timeout”

I'm using gatsby 2.0.76, deploying through heroku-cli. The app seems to deploy just fine, getting this message in the command line: remote: Verifying deploy... done. But then it doesn't load and I ...
0
votes
0answers
10 views

TypeError: Cannot read property 'data' of undefined Gatsby Wordpress Netlify

I'm trying to deploy my gatsby site connected to a wordpress database. But it doesn't work. The error says that it can't recover the data yet I put the configs in gatsby.config 3:58:01 PM: 3:58:01 PM:...
-1
votes
0answers
20 views

GraphQLError: Syntax Error: Expected Name, found $

I'm working on a project that need both fetch and mutate data from a database. I'm building the endpoint with apollo-graphql. I have the schema and now I'm working on the resolver. But when I try to ...
0
votes
2answers
46 views

How to fix Cannot find module 'gatsby-cli/lib/reporter'?

I am getting problem with gatsby. It's is showing Error: Cannot find module 'gatsby-cli/lib/reporter' in tarmial when I am running gatsby develop . How can I solve it please answer E:\JavaScript\...
1
vote
1answer
39 views

How to fix: Gatsby build results in css files being merged, which disrupts local styling on specific Gatsby pages

I'm converting my Gatsby site from development to an actual build. I've been able to get everything to work in "develop" mode, specifically using a separate css stylesheet for one of my pages. When I ...
0
votes
1answer
10 views

Create Contentful Custom Slug

I'm currently using the Contentful 'slug generator' widget which auto-generates a slug from the Title field. Is there a way I can automatically add a prefix to the slug? Ex: Current: Post Title -> ...
1
vote
2answers
119 views

Gatsby Develop failing : Error: Cannot find module 'gatsby-cli/lib/reporter'

Keep getting an error from gatsby-cli when doing gatsby develop command in terminal. Already deleted node-modules and reinstalled using npm. Tried installing Gatsby-Cli as a separate module but that ...
0
votes
0answers
11 views

Problems of preloading fonts and images using gatsby and netlify

I am keep getting the warning message of my website: https://www.selectchu.com chrome warning message "The resource was preloaded using link preload but not used within a few seconds from the window'...
0
votes
1answer
21 views

Modify HTML tag from dangerouslySetInnerHTML in React

I am building a Gatsby Blog using React/Gatsby & the Wordpress API. I render an excerpt of the latest articles on the landing page like so: <span className="mb-0" id="excerpt-wrapper" ...
2
votes
1answer
25 views

What is the purpose of the Image component in the gatsby-starter-default starter?

I don't know if the image.js file in the components folder is supposed to take in arguments specifying things like fluid vs fixed, image size, which image should be rendered, etc, and then render any ...
0
votes
0answers
14 views

Problems setting up 404 page on Gatsby site in AWS Amplify

I have a simple Gatsby site that I've deployed through AWS Amplify based on this guide. However, I'm struggling to set up a proper 404 page through the AWS Amplify Console (or via a config file). I ...
0
votes
0answers
22 views

Running A Javascript Function After Google API Library Loads in Gatsby

I'm setting up Google Sign-In for server-side apps on a Gatsby site. I've been able to load the libraries using react-helmet shown in the below code but cannot seem to initialize the GoogleAuth object ...
0
votes
0answers
25 views

Hot reloading components in Gatsby doesn't work

I've started using Gatsby JS and there is something very strange in hot reloading components used. If by any chance you have a 2 level implementation of components, i.e. /components /Component ...
0
votes
0answers
14 views

How to fetch from the following URL in gatsby-source-apiserver

When I use curl, I get the data as intended from the API: (removed some characters for privacy) curl -d "Email=xxx@gmail.com&Password=xxx" -X POST "http://xxx" The above works fine, but I have ...
0
votes
0answers
12 views

When I save a markdown file it recreates all the files, is that normal?

Lets say I have 300 markdown files. While having gatsby develop running, I update one, save the file and I see in console that its creating ALL the markdown pages again. I just put a console log in ...
-4
votes
0answers
34 views

Uncaught Error: The result of this StaticQuery could not be fetched [on hold]

i do some gatsby for react website I watch this tutorial : https://www.youtube.com/watch?v=8t0vNu2fCCM&t=432797s and at 2:13:17, gatsby show me this error: GraphQL Error There was an error ...
0
votes
0answers
13 views

react-loadable with GatsbyJS

I'm using react-loadable with Gatsby, and have a question about the loading component and getting it to run. It appears that I've set everything up correctly because I'm able to successfully load a ...
1
vote
0answers
21 views

Gatsby dynamic content and schema stitching

I have the following graphql query that is executing at build time from my gatsby-node.js file that I'm using to bring in my article data. Is there a way to use Apollo/Axios to retrieve new articles ...
0
votes
1answer
29 views

How to pass Data from graphicQL to React component with gatsby?

I am trying to pass the Images through GraphicQL to my Banner component, which is a fragment component.. This code worked in my index.js but does not work when i try to create a new component. I ...
0
votes
0answers
21 views

How do I create child in contentful?

Hope you guys have good friday so far. I have a website written in gatsby that grabs some copy from contentful, I'm having some difficulties with graphql query which has child in it, and I'm not ...
0
votes
0answers
17 views

Gatsby - TypeError: Cannot set property 'onclick' of null

In my Gatsby site I get the following error: TypeError: Cannot set property 'onclick' of null. I tried the solutions from other stackoverflow questions related to this one. But none seems to work on ...
1
vote
0answers
13 views

How can I show blog post excerpts on main page without them disappearing?

When I open the main page of my Gatsby site the excerpts of the second and third blog posts disappear. Steps to reproduce Create new project using gatsby-starter-blog starter gatsby new new-blog ...
1
vote
0answers
21 views

How to see if gatsby-plugin-offline is working

I am new to Gatsby so please bear with me. I want to add offline support to my app such that if a user were to try access it while offline (after having visited it online) it would still show up. ...
0
votes
0answers
27 views

Array.prototype.flat() creates an error when building Gatsby site

When building, I get the following error: WebpackError: TypeError: Object.entries(...).map(...).flat is not a function I can gatsby deveop the app just fine, and all works as expected in the browser....
0
votes
1answer
17 views

How to serve gatsby development build on local network using https?

I have tried this command: gatsby develop --host $(hostname) --https but get the following error: /usr/local/lib/node_modules/gatsby-cli/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/...
1
vote
1answer
64 views

How to fix Promise {<pending>} when trying to play an audio file on keydown event in Gatsby framework?

I'm attempting to add a HTML/Javascript drumkit I've made to my Gatsby site. Currently, no sounds play when keys are pressed, and the promise returned from audio.play() hangs at "pending". I've ...
0
votes
0answers
22 views

Serve Gatsby blog site in sub directory with Netlify

I'm new to gatsby and netlify and I'm having a problem. I have a domain called example.com. It has an index.html file, which is a static html file. I want to create a subfolder named blog here and ...
0
votes
2answers
43 views

how to set isTop to be false

So I am checking to see if the user is on a device smaller than 768px and if they are I want to set isTop to be false. I am running into a few issues. Everything looks to be okay but I keep getting ...
1
vote
0answers
32 views

Can I get MarkdownRemark nodes at onCreateNode()?

I tried to get MarkdownRemark nodes at onCreateNode() like this. exports.onCreateNode = ({ getNodesByType, node }) => { if (node.internal.type === 'Directory') { const markdowns = ...
0
votes
1answer
25 views

disable addEventListener for mobile/smaller screen devices

I have a navigation component that has hidden navigation items until you scroll to a certain point in the viewport. isTop looks for the position on the page and once its reached the nav items fade in. ...
0
votes
1answer
22 views

How to create list of strings in markdown frontmatter?

I am trying to retrieve data in form of a list from markdown frontmatter using gatsbyjs and graphql. Given the List in the markdown file, the goal would be to fetch the list items into my react ...
0
votes
0answers
25 views

How to fix graphql syntax error with gatsby in Visual Studio Code

I try to use Gatsby React Framework, however, when I try to follow guide of StaticQuery, I got a syntax error. syntax error I don't know how to fix this Syntax Error. I have already install the ...
1
vote
2answers
12 views

Stop outside clicks from activating modal in Gatsby - where to put 'react-outside-click-handler'?

I have added a click handler so that when a user clicks outside of my modal, it closes the modal box. I am using 'react-outside-click-handler' in my Gatsby.js project to achieve this. This click ...
1
vote
1answer
30 views

disable component functionality based on page

I a navigation where the menu items are hidden until you get to a certain point on the page then they show. This works great on the homepage, because it is a relatively long page. But, some of my ...
1
vote
2answers
38 views

When mapping over an array to generate React components, array order is not respected

I have an array of image src's (this.props.images) which I'm using to render a grid in a project I made using Gatsby. This works as expected when running locally - the images are rendered in the order ...
4
votes
1answer
87 views

netlify dev starts an endless loop

I'm working on adding environment variables to make conditional switching for Netlify functions. When I run CONTEXT=development netlify dev I'm getting stuck in an endless loop and Lambda server keeps ...
-1
votes
0answers
9 views

How to use a shared component in a page in Gatsby? [closed]

I created a footer component and when I call in that component, I am getting a module error on my webpage. Can someone please point out the perfect way to create a shared component and use it in a ...
1
vote
1answer
20 views

Material UI + Gatsby Google Analytics plugin: “Function components cannot be given refs” warning for Material Ui Link wrapping OutBoundLink

I want to wrap an OutboundLink component from the Gatsby Google Analytics plugin in a Material UI Link component. I get this error message in the console: index.js:2177 Warning: Function components ...
1
vote
1answer
41 views

How to get a specific translation of drupal node with graphql

I am using drupal 8 to build a headless page with gatsby and graphql. How to query a translation of a page? query MyQuery { allNodePage { nodes { body { value } } } }...
1
vote
2answers
23 views

gatsby-source-drupal does not show graphql queries

I added gatsby-source-drupal to my gatsby project but for some reason the drupal-queries dont show up in the GraphiQL (http://localhost:8000/___graphql). I tried this tutorial. gatsby-config.js ...
1
vote
1answer
23 views

How do I limit what I pull down for my gatsby site from my repo?

I am building a new blog/portfolio site using gatsby, but I am not sure how to use git with this project. I deployed the site successfully, which generated the static files as expected. I did a git ...
0
votes
1answer
23 views

Where does the variable slug comes from in gatsby graphql query?

We create the slug node in gatsby-node.js. Then we create the createPage const posts = result.data.allMarkdownRemark.edges posts.forEach(({ node: post }) => { createPage({ path: `...
1
vote
1answer
19 views

Conditionally Use Gatsby Link in React Compoment

I have a react component that contains within it a number of sub-components. I want to wrap those sub-components in an anchor tag. Now, sometimes that anchor tag will link to a sub-page, other times ...
0
votes
1answer
28 views

GatbysJS Typography - AvenirNext - Not working on Windows / Linux

I'm coding a landing page using GatsbyJS. And i want to use the AvenirNext font on my website. So i followed the tutorial about using Typography. My typography.js file looks like : import Typography ...
1
vote
1answer
25 views

how to access gatsby env variables in netlify-lambda

I would like to use different credentials in my Netlify functions depending on my NODE_ENV variable. I have a Gatsby project and when I run netlify dev Gatsby sets NODE_ENV === development and gatsby ...
1
vote
1answer
35 views

How to apply filter on GraphQL running on JSON file?

I am trying to run a GraphQL query on JSON file. It is working well, but when I try to add a filter in it, it still shows all the records. My JSON data file My JSON Schema GraphQL: { allDataJson(...