如何在现有项目中添加 GraphQL 查询

GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、更强大的方式来获取数据。在现有的项目中，如果你想要添加 GraphQL 查询，那么本文将为你提供详细的指导。

1. 安装 GraphQL

首先，你需要安装 GraphQL。可以通过 npm 或者 yarn 来进行安装。

npm install graphql

或者

yarn add graphql

2. 添加 GraphQL 服务器

接下来，你需要添加一个 GraphQL 服务器。可以使用现有的框架或者自己编写服务器。这里我们以 Express 和 Apollo Server 为例。

// javascriptcn.com 代码示例
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello World!'
  }
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)
);

在这个例子中，我们定义了一个简单的查询 hello，并返回了一个字符串。

3. 添加 GraphQL 客户端

现在我们需要在前端添加 GraphQL 客户端。可以使用现有的库，如 Apollo Client，或者自己编写客户端。

// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

client
  .query({
    query: gql`
      query {
        hello
      }
    `
  })
  .then(result => console.log(result.data));

在这个例子中，我们使用了 Apollo Client 来发送一个查询 hello，并打印出返回的数据。

4. 添加更多查询

现在你可以在服务器端和客户端中添加更多的查询和解析器了。可以使用现有的数据源或者自己编写解析器来获取数据。

// javascriptcn.com 代码示例
const typeDefs = gql`
  type Query {
    hello: String
    books: [Book]
  }

  type Book {
    title: String
    author: String
  }
`;

const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' },
  { title: '1984', author: 'George Orwell' }
];

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
    books: () => books
  }
};

在这个例子中，我们添加了一个查询 books，并返回了一个包含书籍信息的数组。

总结

添加 GraphQL 查询并不难，只需要按照上述步骤进行操作即可。GraphQL 提供了更高效、更强大的方式来获取数据，可以大大提高开发效率。如果你还没有使用过 GraphQL，那么现在就是时候尝试一下了！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656fe616d2f5e1655d867f1c