Skip to main content

GraphQL 入门

¥Getting Started with GraphQL

🧹 删除了集成指南

Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。

¥The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.

因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的 集成页面。

¥As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.

与此同时，我们鼓励你阅读 GraphQL API 部分，该部分已与 Strapi 5 保持同步。

¥In the meantime, we encourage you to read the GraphQL API section, which is already up-to-date with Strapi 5.

本集成指南遵循 快速入门指南。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。

¥This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

如果你尚未阅读快速入门指南，则使用 GraphQL 请求 Strapi API 的方式将保持不变，只是你不会获取相同的内容。

¥If you haven't gone through the Quick Start Guide, the way you request a Strapi API with GraphQL remains the same except that you will not fetch the same content.

安装 GraphQL 插件​

¥Install the GraphQL plugin

在你的 Strapi 项目中安装 GraphQL 插件。

¥Install the GraphQL plugin in your Strapi project.

yarn strapi install graphql

获取你的餐厅集合类型​

¥Fetch your Restaurant collection type

使用 GraphQL 在线运行 获取你的内容。

¥Use the GraphQL Playground to fetch your content.

Example query
query Restaurants {
  restaurants {
    id
    name
    description
    categories {
      name
    }
  }
}
Example response
{
  "data": {
    "restaurants": [
      {
        "id": "1",
        "name": "Biscotte Restaurant",
        "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
        "categories": [
          {
            "name": "French Food"
          }
        ]
      }
    ]
  }
}

示例​

¥Examples

这些示例不包括使用 Apollo 为 GraphQL 端点 配置客户端。请遵循 React 或 Vue.js 的相关文档。

¥These examples do not include configuring your client with Apollo for your GraphQL endpoint. Please follow the associated documentation for React or Vue.js.

使用 React 和 Apollo

¥Using React and Apollo

import { gql, useQuery } from '@apollo/client';

function Restaurants() {
  const { loading, error, data } = useQuery(gql`
    query Restaurants {
      restaurants {
        id
        name
        description
        categories {
          name
        }
      }
    }
  `);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <ul>
      {data.restaurants.map(restaurant => (
        <li key={restaurant.id}>{restaurant.name}</li>
      ))}
    </ul>
  );
}

获取你的类别集合类型​

¥Fetch your Category collection type

Example request
query Category {
  category(id: 1) {
    id
    name
    restaurants {
      id
      name
      description
    }
  }
}
Example response
{
  "data": {
    "category": {
      "id": "1",
      "name": "French Food",
      "restaurants": [
        {
          "id": "1",
          "name": "Biscotte Restaurant",
          "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
        }
      ]
    }
  }
}

示例​

¥Examples

使用 React 和 Apollo

¥Using React and Apollo

import { gql, useQuery } from '@apollo/client';

function Category({ id }) {
  const { loading, error, data } = useQuery(
    gql`
      query Category($id: ID!) {
        category(id: $id) {
          id
          name
          restaurants {
            id
            name
            description
          }
        }
      }
    `,
    { variables: { id } }
  );

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      <h1>{data.category.name}</h1>
      <ul>
        {data.category.restaurants.map(restaurant => (
          <li key={restaurant.id}>{restaurant.name}</li>
        ))}
      </ul>
    </div>
  );
}