gatsby

问题 i want to display three posts per row in a gatsbyjs web page. i am having an array of posts, if i were to display using columns it would be just applying the multiline class on the posts container div. but i am using tiles layout built-in in bulma css, unfortunately that don't support multiline likes columns do. so i have to wrap every three posts in a div with class 'tile'. for which i split the array into chunks of 3 size each (as suggested by someone here, thanks to him) now it boiled down

问题 I'm stuck on making firebase work in my gatsby application that uses Redux with Redux-sagas. I know about the existence of firebase-sagas but I'm trying to make without using it. I'm trying to init firebase auth by: import * as firebase from 'firebase/app'; import 'firebase/auth'; export const app = firebase.initializeApp( { apiKey : "apiKey", authDomain : "project.firebaseapp.com", databaseURL : "https://project.firebaseio.com", projectId : "project", storageBucket : "project.appspot.com",

问题 I set up .env file and gatsby-config.js as below. // .env.development GATSBY_API_URL=https://example.com/api // gatsby-config.js console.log(process.env) ... ... Although when to run gatsby develop , it shows all env vars including GATSBY_API_URL: 'https://example.com/api' , but there is no env vars on a browser. // client side console.log(process.env) // => this will return {} empty object I think I followed https://www.gatsbyjs.org/docs/environment-variables/ as it says, and added GATSBY_

问题 I know I ask this on the eve of React Hooks being released but I was wondering - is it possible to create Page components as a Class component instead of a Function component? When I convert the default Gatsby starter src/pages/index.js page to a Class component as such class IndexPage extends React.Component { render() { return ( <div>I am a class component</div> ) } } export default IndexPage I get this error (AppContainer)TypeError: Cannot set property 'props' of undefined I couldn't find

问题 I have a Gatsby project with very similar GraphQL queries for two different types of content: regular pages and wiki articles. Page by slug export const query = graphql` query($slug: String!) { page: contentfulPage(slug: {eq: $slug}) { title slug body { remark: childMarkdownRemark { excerpt html headings { value depth } } } updatedAt(formatString: "D. MMM YYYY") authors { name email } } } ` Wiki article by slug export const query = graphql` query($slug: String!) { article:

问题 I'm stuggling to figure out how to query for multiple specific images with GraphQL in Gatsbyjs. My initial thought was to do something like this: file(relativePath: {eq: "images/front.jpg"}) { id } file(relativePath: {eq: "images/front2.jpg"}) { id } This throws an error in GraphQL: { "errors": [ { "message": "Fields \"file\" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.", "locations": [ { "line": 28, "column": 1 },

问题 I'm stuggling to figure out how to query for multiple specific images with GraphQL in Gatsbyjs. My initial thought was to do something like this: file(relativePath: {eq: "images/front.jpg"}) { id } file(relativePath: {eq: "images/front2.jpg"}) { id } This throws an error in GraphQL: { "errors": [ { "message": "Fields \"file\" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.", "locations": [ { "line": 28, "column": 1 },

问题 I'm stuggling to figure out how to query for multiple specific images with GraphQL in Gatsbyjs. My initial thought was to do something like this: file(relativePath: {eq: "images/front.jpg"}) { id } file(relativePath: {eq: "images/front2.jpg"}) { id } This throws an error in GraphQL: { "errors": [ { "message": "Fields \"file\" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.", "locations": [ { "line": 28, "column": 1 },

问题 There have been a couple of similar questions, but none helped me really understand using a GraphQL inside a (class) component other than the ones in the pages folder. My project structure looks like that: -src --components ---aboutBody ----index.js --pages ---about.js I have a page component called about (Prismic single page type) and set up some components to "fill" this page (cleaned up for better readability). class AboutPage extends Component { render() { return ( <LayoutDefault>

问题 There have been a couple of similar questions, but none helped me really understand using a GraphQL inside a (class) component other than the ones in the pages folder. My project structure looks like that: -src --components ---aboutBody ----index.js --pages ---about.js I have a page component called about (Prismic single page type) and set up some components to "fill" this page (cleaned up for better readability). class AboutPage extends Component { render() { return ( <LayoutDefault>