gatsby_将您的GraphCMS数据导入Gatsby

gatsby

Let's set up Gatsby to pull data from GraphCMS.

让我们设置Gatsby来从GraphCMS中提取数据。

This will be a walk-through of setting up some basic data on the headless CMS, GraphCMS and then querying that data in Gatsby.

这将是在无头CMS，GraphCMS上设置一些基本数据，然后在Gatsby中查询该数据的演练。

1.设置GraphCMS (1. Set up GraphCMS)

Set yourself up with a GraphCMS account at https://app.graphcms.com/signup and select the developer plan.

在https://app.graphcms.com/signup上使用GraphCMS帐户进行设置，然后选择开发者计划。

2.定义数据 (2. Define Data)

Create a new project and add in some data to query.

创建一个新项目并添加一些数据以进行查询。

Select the Create new project option, call it what you like, in this example it's going to be a list of projects, so I'm calling it Project List.

选择Create new project选项，按您的喜好命名，在本示例中，它将是一个项目列表，因此我将其称为Project List 。

In the side bar select the Schema and create a model, in this case Project. In the project model we're going to have a Title and a Description.

在侧栏中，选择Schema并创建一个模型，在本例中为Project 。 在项目模型中，我们将具有Title和Description 。

Select the fields from the tray on the right by clicking the FIELDS tab and dragging and dropping them into the Project model we created.

通过单击FIELDS选项卡并将其拖放到我们创建的Project模型中，从右侧的托盘中选择字段。

3.配置GraphCMS公共API (3. Configure the GraphCMS public API)

In the GraphCMS settings set the Public API Permissions to READ scroll down to Endpoints and copy the URL for use in configuring Gatsby.

在GraphCMS设置中，将“ 公共API权限”设置为“ 读取”，向下滚动至“ 端点”，然后复制URL以配置Gatsby。

That's it for the CMS configuration, now to pull that data into our Gatsby frontend!

CMS配置就是这样，现在将数据拉入我们的Gatsby前端！

4.配置盖茨比 (4. Configure Gatsby)

In you Gatsby project install gatsby-source-graphql and configure it in gatsby-config.js the configuration should looks something like:

在您的Gatsby项目中，安装gatsby-source-graphql并在gatsby-config.js对其进行配置，其配置应类似于以下内容：

{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'GRAPHCMS',
    fieldName: 'graphCmsData',
    url: 'https://api-euwest.graphcms.com/v1/projectid/master',
  }
},

In this example we're using codesandbox.io for our text editor and the Gatsby Default Starter you get when selecting Gatsby from the SERVER TEMPLATES available to you in codesandbox.io

在此示例中，我们将codeandbox.io用于我们的文本编辑器，以及从codeandbox.io中可用的服务器模板中选择Gatsby时所获得的Gatsby Default Starter。

5.在Gatsby GraphiQL中查询数据 (5. Query the data in Gatsby GraphiQL)

Now that the endpoint is set up we will be able to query the data with Gatsby's GraphiQL UI, we can shape the query we want to use to display the data here.

现在已经设置了端点，我们将能够使用Gatsby的GraphiQL UI查询数据，我们可以调整要用于在此处显示数据的查询。

In the preview of our app in codesandbox.io if you add ___grapgql to the end of the url it will bring up the Gatsby GraphiQL UI, here we can shape the data we want to query.

在codeandbox.io中我们应用程序的预览中，如果在网址末尾添加___grapgql ，它将弹出Gatsby GraphiQL UI，在这里我们可以调整要查询的数据。

If we open up some curly brackets {} and Cmd+space we'll see the available fields where we can pick out the graphCmsData field we defined in the gatsby-source-graphql plugin.

如果打开大括号{}和Cmd + space，我们将看到可用的字段，从中可以选择在gatsby-source-graphql插件中定义的graphCmsData字段。

Selecting the fields we created in GraphCMS then running the query will display our defined data.

选择我们在GraphCMS中创建的字段，然后运行查询将显示我们定义的数据。

{
  graphCmsData {
    projects {
      id
      status
      title
      description
    }
  }
}

6.显示数据 (6. Display the Data)

Use the graphql gatsby export to query the data from the GraphCMS endpoint.

使用graphql gatsby导出可从GraphCMS端点查询数据。

In pages/index.js add the graphql export the the gatsby imports.

在pages/index.js添加graphql导出gatsby导入。

import { graphql, Link } from 'gatsby';

At the very bottom define the query:

在最底部定义查询：

export const query = graphql`
  {
    graphCmsData {
      projects {
        id
        status
        title
        description
      }
    }
  }
`;

You will then be able to access the data prop in the IndexPage component, we'll need to de-structure the data prop out in the arguments of the component:

然后，您将能够访问IndexPage组件中的data IndexPage ，我们需要在该组件的参数中对data属性进行解构：

const IndexPage = ({ data }) => (

Now we can access the data passed into the component, we just need a way to visualise it! Luckily for use there's a handy component from Wes Bos that we can use called Dump, so create a new dump.js component in components then import it into the index.js file, and add in the component to see what's inside the props:

现在我们可以访问传递到组件中的data ，我们只需要一种可视化的方式即可！ 幸运的是，Wes Bos有一个方便的组件，我们可以使用它称为Dump ，因此可以在components创建一个新的dump.js组件，然后将其导入index.js文件，并添加该组件以查看道具内部的内容：

const IndexPage = ({ data }) => (
  <Layout>
    <h1>Hi people</h1>
    <Dump data={data} />
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
);

The output should be the same as the result of the Gatsby GraphiQL query we created:

输出应与我们创建的Gatsby GraphiQL查询的结果相同：

data ?{
 "graphCmsData": {
  "projects": [
   {
    "id": "cjoxa812txqoh0932hz0bs345",
    "status": "PUBLISHED",
    "title": "Project 1",
    "description": "Description 1"
   },
   {
    "id": "cjoxa8cctxqqj0932710u39db",
    "status": "PUBLISHED",
    "title": "Project 2",
    "description": "Description 2"
   },
   {
    "id": "cjoxa8pbqxqt309324z9bcddv",
    "status": "PUBLISHED",
    "title": "Project 3",
    "description": "Description 3"
   },
   {
    "id": "cjoxa959vxqvz0932g1jn5ss3",
    "status": "PUBLISHED",
    "title": "Project 4",
    "description": "Description 4"
   }
  ]
 }
}

谢谢阅读 ？ (Thanks for reading ?)

If there is anything I have missed, or if there is a better way to do something then please let me know.

如果我错过了任何事情，或者有更好的方法做某事，请告诉我。

Follow me on Twitter or Ask Me Anything on GitHub.

在Twitter上关注我，或在GitHub上询问我 。

You can read other articles like this on my blog.

您可以在我的博客上阅读其他类似的文章 。

翻译自: https://www.freecodecamp.org/news/get-your-graphcms-data-into-gatsby-2018/

gatsby