Question

我正在尝试将graphquery与react和gatsby一起使用，但无法获取数据。如果它是用js编写的，我可以获得数据。我该如何解决？谢谢。

我是从gatsby typesript启动程序启动的，但是无法正常工作。

Uncaught ReferenceError: gatsby_1 is not defined
    at ./src/templates/index-page.tsx.exports.IndexPageTemplate (index-page.tsx:56)

index.js:2177 The above error occurred in the <TemplateWrapper> component:
    in TemplateWrapper (created by IndexPage)


React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

我将sitemetadata文件从js更改为tsx，然后出现了错误

SiteMetaData.tsx

import { graphql, useStaticQuery } from "gatsby";

const useSiteMetadata = () => {
  const { data } = useStaticQuery(
    graphql`
      query GetSiteMetaData{
        site {
          siteMetadata {
            title
            description
          }
        }
      }
    `
  );
  return data.siteMetaData;
};

export default useSiteMetadata;

Layout.tsx

import * as React from "react";
import Helmet from "react-helmet";
import Footer from "../Organisms/Footer";
import Navbar from "../Organisms/Navbar";
import useSiteMetadata from "../Organisms/SiteMetadata";

interface TemplateWrapperProps {
  children: React.ReactChild;
}

const TemplateWrapper: React.SFC<TemplateWrapperProps> = ({ children }) => {

  const { title, description }: any = useSiteMetadata();
  return (
    <div>
      <Helmet>
        <html lang="ja" />
        <title>{title}</title>
        <meta name="description" content={description} />

        <meta name="theme-color" content="#fff" />

        <meta property="og:type" content="business.business" />
        {/**<meta property="og:title" content={title} /> */}
        <meta property="og:url" content="/" />
        <meta property="og:image" content="/img/og-image.jpg" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      </Helmet>
      <Navbar />
      <div>{children}</div>
      <Footer />
    </div>
  );
};

export default TemplateWrapper;

Answer 1

尝试将graphql导入分隔到自己的行中，对我有用：

import { graphql } from 'gatsby';
import { Link, useStaticQuery } from 'gatsby';

在gatsby-plugin-ts-loader存储库上似乎有一个未解决的问题：https://github.com/AdamLeBlanc/gatsby-plugin-ts-loader/issues/1#issuecomment-453876850

如何修复gatsby_1未定义

1 个答案: