gatsby

I have a GatsbyJS static site built with --prefix-paths . The pathPrefix is set to /environment/test in gatsby-config.js . It is deployed to a docker swarm running Traefik. Adding the following label to the service makes everything run ok: traefik.frontend.rule=PathPrefixStrip:/environment/test I can then browse to /environment/test and click around in my GatsbyJs site. However I find it strange since the backend is build with the path prefix. Adding the following label does not work: traefik.frontend.rule=PathPrefix:/environment/test Shouldn't it work with PathPrefix instead of

I am trying to run a GraphQL query inside replaceRouterComponent from within gatsby-browser.js ( gatsby browser API ). Whereas, I can access data from Contentful . This may not be the best solution and any advice on how I can achieve in another way would be appreciated too. Here is the issue - Inside of the component TripAdvisor.js I am mounting the scripts within componentDidMount , whereas the locationId is based on the data of this.props.tripAdvisorId pulled from the individual posts created in Contentful . Each post (property) has an individual locationId that when changed in the script

I would like to pass state to a sibling or even a grandparent whatever. I have 3 components. Inside Header , I have a button with an onClick function to toggle a Dropdown Menu inside Navigation . And by the way, I would like to pass the same state to AnotherComponent . How to pass state (such as isDropdownOpened ) from Header to Navigation and AnotherComponent ? <div> <Header /> <Navigation /> <div> <div> <div> <AnotherComponent /> </div> </div> </div> </div> That's the exact reason why "React Hooks" have been developed (and hyped by the community 😉), but don't use them yet in production, they

I have 16 images that I want to render out onto a website in a grid format. I'm using the following plugins for this: gatsby-image gatsby-source-filesystem gatsby-plugin-sharp gatsby-transformer-sharp I read the documentation and as for as I know, it only demonstrated how to query for one single image. e.g. import React from "react" import { graphql } from "gatsby" import Img from "gatsby-image" export default ({ data }) => ( <div> <h1>Hello gatsby-image</h1> <Img fixed={data.file.childImageSharp.fixed} /> </div> ) export const query = graphql` query { file(relativePath: { eq: "blog/avatars

I'm working on a news site which will have articles, each with one or multiple respective authors. If you click on an author's name, it will take you to a page displaying their information and a list of articles they have contributed to. So each article has an authors property, which in turn is an array of author objects with properties: full name, slug ( lowercase version of full name with spaces replaced by dashes ), etc. Is it possible to filter the articles by a particular author's slug when defining the query? query authorQuery($slug: String!) { allContentfulArticle(filter: { //not sure

I am looking for help with GatsbyJS and Contentful. The docs aren't quite giving me enough info. I am looking to programmatically create pages based on contentful data. In this case, the data type is a retail "Store" with a gatsby page at /retail_store_name The index.js for each store is basically a couple of react components with props passed in e.g. shop name and google place ID. Add data to contentful. Here is my example data model: { "name": "Store" "displayField": "shopName", "fields": [ { "id": "shopName", "name": "Shop Name", "type": "Symbol", "localized": false, "required": true,

I have an Articles component which displays a list of posts. The list is paginated so that a maximum of 10 posts can display per page. There is a "Next Page" button that when clicked will update the component state and the corresponding url parameter like so: page 1: /news page 2: /news?page=2 page 3: /news?page=3 ...and so on. The way the constructor() and render() methods are set up, it will read this URL parameter and display the correct posts if the user navigates directly to /news?page=3, for instance. The issue I'm having is that the browser back and forward buttons don't seem to

I'm interested in using Gatsby to build a Netlify static site using content from Contentful Netlify has this nice gettting started Gatsby guide: ​​ https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify But I'm a bit unsure of how to bring Contentful into the mix. Do I need to write scripts to convert my Contentful content into Gatsby 'markdown'? Any ideas, ideas, links appreciated! Brandon Since this question was posted, an official Contentful plugin's been added to Gatsby's collection (official as in created by Gatsby team, not Contentful): https://github.com/gatsbyjs

I'm using gatsby-image to handle automatically handle different image sizes. It works great. However, in the docs of gatsby-image, one example uses imageSharp in graphql to get different image sizes, while another example uses childImageSharp . I was curious what the difference between the two are? I assume it has to do with either gatsby-transformer-sharp or gatsby-plugin-sharp , but the docs for those plugins don't have any info on that either. It's been a while since this question was asked, but I hope to give a direct answer to the question 'what's the different between imageSharp and