使用GraphQL-Yoga+Urql+React快速入门GraphQL

2023-10-02 08:50:08

GraphQL是一种查询语言，用于从服务端获取数据。它允许客户端指定所需的数据字段，服务端仅返回客户端请求的数据。GraphQL具有高性能、易于使用和灵活等优点，在现代Web开发中得到了广泛应用。

在本教程中，我们将使用GraphQL-Yoga+Urql+React快速入门GraphQL。我们将搭建一个简单的GraphQL服务端和客户端，并通过GraphQL Playground创建和查询数据。

服务端搭建

首先，我们需要搭建一个GraphQL服务端。我们使用GraphQL-Yoga作为GraphQL服务端框架。

npm install graphql-yoga

然后，创建一个名为server.js的文件，并添加以下代码：

const { GraphQLServer } = require('graphql-yoga');

// 定义GraphQL schema
const typeDefs = `
  type Query {
    hello: String
  }
`;

// 定义GraphQL resolvers
const resolvers = {
  Query: {
    hello: () => 'Hello, world!'
  }
};

// 创建GraphQL服务端
const server = new GraphQLServer({
  typeDefs,
  resolvers
});

// 启动GraphQL服务端
server.start(() => console.log('Server is running on port 4000'));

客户端搭建

接下来，我们需要搭建一个GraphQL客户端。我们使用Urql作为GraphQL客户端框架。

npm install urql

然后，创建一个名为client.js的文件，并添加以下代码：

import { createClient, gql } from 'urql';

// 创建GraphQL客户端
const client = createClient({
  url: 'http://localhost:4000'
});

// 定义GraphQL查询
const query = gql`
  query {
    hello
  }
`;

// 执行GraphQL查询
client.query(query).then((result) => {
  console.log(result.data.hello);
});