标签: gatsby

我正在建立一个盖茨比网站。我将 Node.js 升级到v17.0.1，当我运行构建时，出现错误：

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

如果我将其降级到 v16，它可以正常工作，并且构建将会成功。我怎样才能解决这个问题？

从谷歌搜索，这可能是一个类似的问题： 错误：错误：06065064：数字信封例程：EVP_DecryptFinal_ex：解密错误＃48

我试图为我的 Gatsby 应用程序构建我的 Docker 映像。每当我运行命令时 docker build . -t gatsbyapp，它都会给我一个错误：

failed to solve with frontend dockerfile.v0: failed to build LLB:
failed to compute cache key: "/.env" not found: not found

同时我的 Dockerfile 如下所示：

FROM node:13

WORKDIR /app

COPY package.json .

RUN yarn global add gatsby-cli

RUN yarn install

COPY gatsby-config.js .

COPY .env .

EXPOSE 8000

CMD ["gatsby","develop","-H","0.0.0.0"]

我正处于我的React/javascript学习体验的快速原型阶段.我想知道什么时候人们会找到像Next.js或Gatsby.js这样的框架与标准的Create React App.

我真的挖掘基于页面的结构和前景预加载Next.js的链接.但是,我不确定你什么时候可以达到CRA,甚至是CRA.

谢谢!

我是React和GatsbyJS的新手.我很困惑,无法以一种简单的方式从第三方Restful API加载数据.

例如:我想从randomuser.me/API获取数据,然后能够使用页面中的数据.

我们这样说:

  import React from 'react'
  import Link from 'gatsby-link'

  class User extends React.Component {
    constructor(){
      super();
      this.state = {
        pictures:[],
      };

    }

    componentDidMount(){
      fetch('https://randomuser.me/api/?results=500')
      .then(results=>{
        return results.json();
      })
      .then(data=>{
        let pictures = data.results.map((pic,i)=>{
            return(
              <div key={i} >
                <img key={i} src={pic.picture.medium}/>
              </div>
            )
        })
        this.setState({pictures:pictures})
      })
    }

    render() {
      return (<div>{this.state.pictures}</div>)
    }
  }

  export default User;

但我想得到GraphQL的帮助,以便对用户等进行过滤和排序......

您能否帮我找一下如何获取数据并将其插入GraphQL的示例 gatsby-node.js

我在Gatsby项目中更新了一些npm软件包,现在我在控制台中看到了这个警告:

React-hot-loader: react--dom patch is not detected. React 16.6+ features may not work.

但是,当我查看源代码时,有一个评论:

// Actually everything works...

这个警告实际意味着什么？这是我应该解决的问题还是让它成为现实？

我正在使用 GatsbyJS 和 TypeScript 以及 gatsby-plugin-sass 插件。我正在尝试为组件导入单独的样式，如下例 - 导入“./Card.scss”。

import React from 'react';
import Colors from '../../constants/Colors';
import './Card.scss'

interface CardProps {
  children: any,
  padding?: number,
  marginBottom?: number,
  borderRadius?: number,
  hover?: boolean,
  border?: boolean
}

const Card: React.FunctionComponent<CardProps> = ({ children, padding, marginBottom, borderRadius, hover, border }) => {

  const cardStyling = {
    backgroundColor: Colors.white,
    padding: padding,
    marginBottom: marginBottom,
    borderRadius: borderRadius,
    border: (border ? '1px solid #E8EAED' : '0'),
  } as React.CSSProperties;

  return(
      <div style={cardStyling} className={hover ? 'card-shadow card-hover card-padding' …

Gatsby入门 - 当我使用google字体向public/index.html添加链接标记时,它在开发模式下工作.当我构建网站时,index.html会重置.所以我想还有另一种正确的方法来添加字体？

我正在使用Gatsbyjs和NetlifyCMS构建一个网站.我已经开始使用这个启动器https://github.com/AustinGreen/gatsby-starter-netlify-cms,我现在正在尝试自定义它.

我想在markdown文件的frontmatter中使用自定义变量,如下所示:

---
templateKey: mirror
nazev: ?ernobílá
title: Black and White
cena: '2700'
price: '108'
thumbnail: /img/img_1659.jpeg
---

我想用GraphQL访问这些数据.我使用gatsby-source-filesystem和gatsby-transform-remark.这是我的查询:

  {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          templateKey
          nazev
          title
          cena
          price
        }
      }
    }
  }
}

我无法让GraphQL读取我自己的变量,它只识别title和templateKey(那些已经在启动器中使用过的).我收到此错误:

{
  "errors": [
    {
      "message": "Cannot query field \"nazev\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": 7,
          "column": 11
        }
      ]
    },
    {
      "message": "Cannot query field \"cena\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": …

就像帖子中的问题一样，我需要能够搜索 3 种可能的情况。我需要全部大写，或小写，或正常大小写。

如果这是不可能的，有没有办法做一个不区分大小写的过滤器？

  allMarkdownRemark(filter: { brand: { eq: $normalBrand } }) { //==> Need more here
        edges {
            node {
                webImages {
                    url
                }
            }
        }
    }

我发现有些人这样做：

filter: { OR: [
  {brand: { eq: $normalBrand }}, 
  {brand: { eq: $normalBrand2 }}, 
  {brand: { eq: $normalBrand3 }}
]}

但它对我不起作用

我正在使用一个使用React,Gatsby和样式组件的静态页面.

在设置页面样式时,我的开发工作流程通常涉及Chrome DevTools,在那里调整样式,直到我有我喜欢的东西,然后在代码中实现它们.

但是,使用样式化组件时,DevTools中为每个呈现元素显示的所有样式/规则都是灰色,斜体和禁用.我可以通过添加样式来覆盖它们element.style {},但这可能很痛苦,并且它无法解决根本问题:为什么样式应用程序在DevTools中禁用样式组件？

这是我所指的截图.