基于GraphQL Schema生成Apollo风格API对象，是否有现成系统？

Absolutely! There are several solid tools in the GraphQL ecosystem that can generate exactly this kind of clean, fluent API you're looking for—especially when paired with Apollo Client. Here are the most popular and reliable options:

1. GraphQL Code Generator (with Apollo Client Plugins) #

This is the industry standard for auto-generating type-safe API layers from your GraphQL schema. It works seamlessly with Apollo and will produce exactly the MyApi style interface you want, complete with type hints (if using TypeScript) and minimal boilerplate.

How it works: #

• Install necessary dependencies: @graphql-codegen/cli, @graphql-codegen/typescript, @graphql-codegen/typescript-apollo-client-helpers, and @graphql-codegen/typescript-operations
• Create a codegen.yml config file pointing to your saved schema and specifying where to output generated code
• Run the codegen command, and it will auto-generate all your query/mutation methods (like listWidgets and updateWidget) wrapped into a reusable API object

Example usage after generation: #

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createMyApi } from './generated/graphql'; // Generated by codegen

const client = new ApolloClient({
  uri: 'your-graphql-endpoint',
  cache: new InMemoryCache(),
});

const api = createMyApi(client);
const widgets = await api.listWidgets();
const modifiedWidget = await api.updateWidget({ 
  widgetId: 'myId', 
  name: 'My widget' 
});

2. Custom Wrapper Class (For Full Control) #

If you prefer a hands-on approach or need highly customized behavior, you can build a simple wrapper class around Apollo Client's query and mutate methods. This lets you define exactly the API shape you want without relying on codegen.

Example custom wrapper: #

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

export class MyApi {
  private client: ApolloClient<any>;

  constructor(client: ApolloClient<any>) {
    this.client = client;
  }

  async listWidgets() {
    const { data } = await this.client.query({
      query: gql`
        query ListWidgets {
          listWidgets {
            widgetId
            name
          }
        }
      `,
    });
    return data.listWidgets;
  }

  async updateWidget(variables: { widgetId: string; name?: string }) {
    const { data } = await this.client.mutate({
      mutation: gql`
        mutation UpdateWidget($widgetId: ID!, $name: String) {
          updateWidget(widgetId: $widgetId, name: $name) {
            widgetId
            name
          }
        }
      `,
      variables,
    });
    return data.updateWidget;
  }
}

Usage: #

const client = new ApolloClient({ /* your config */ });
const api = new MyApi(client);
// Use exactly as you requested!

3. Urql + GraphQL Code Generator #

If you’re open to exploring alternatives to Apollo Client, Urql is another popular GraphQL client that works with GraphQL Code Generator to produce the same fluent API style. The setup is nearly identical to the Apollo approach—just swap out Apollo-specific plugins for Urql ones.

For most cases, GraphQL Code Generator with Apollo plugins is the best choice: it’s automated, type-safe, and reduces the risk of manual errors from writing wrapper methods by hand.

内容的提问来源于stack exchange，提问作者Thom Smith