GraphQL 教學：C# 與 React 實戰範例

1. 什麼是 GraphQL？

GraphQL 是一種 API 查詢語言，由 Facebook 推出，支援客製化查詢、單一端點、型別安全，適合現代前後端分離開發。

2. C# 後端：HotChocolate 快速入門

安裝 HotChocolate

# 建立專案
 dotnet new web -n GraphQLDemo
 cd GraphQLDemo
# 安裝 HotChocolate
 dotnet add package HotChocolate.AspNetCore

定義資料模型與查詢

public class Book {
    public int Id { get; set; }
    public string Title { get; set; }
    public string Author { get; set; }
}

public class Query {
    public List<Book> GetBooks() => new() {
        new Book { Id = 1, Title = "GraphQL 入門", Author = "Mars" },
        new Book { Id = 2, Title = "C# 實戰", Author = "John" }
    };
}

註冊 GraphQL 服務

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

builder.Services
    .AddGraphQLServer()
    .AddQueryType<Query>();

app.MapGraphQL();
app.Run();

啟動後，瀏覽 http://localhost:5000/graphql 可用 Banana Cake Pop 測試查詢：

query {
  books {
    id
    title
    author
  }
}

3. React 前端：Apollo Client 基本用法

安裝 Apollo Client

npm install @apollo/client graphql

設定 ApolloProvider

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

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

function App() {
  return (
    <ApolloProvider client={client}>
      <BookList />
    </ApolloProvider>
  );
}

撰寫查詢與元件

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

const GET_BOOKS = gql`
  query {
    books {
      id
      title
      author
    }
  }
`;

function BookList() {
  const { loading, error, data } = useQuery(GET_BOOKS);
  if (loading) return <p>載入中...</p>;
  if (error) return <p>錯誤: {error.message}</p>;
  return (
    <ul>
      {data.books.map(book => (
        <li key={book.id}>{book.title} - {book.author}</li>
      ))}
    </ul>
  );
}

4. 進階：Mutation 範例

C# Mutation

public class Mutation {
    public Book AddBook(string title, string author) =>
        new Book { Id = 3, Title = title, Author = author };
}
// 註冊 Mutation
builder.Services.AddGraphQLServer()
    .AddQueryType<Query>()
    .AddMutationType<Mutation>();

React Mutation

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

const ADD_BOOK = gql`
  mutation($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

function AddBookForm() {
  const [addBook, { data }] = useMutation(ADD_BOOK);
  // ...表單處理略
}

本文涵蓋 GraphQL 基礎、C# HotChocolate 與 React Apollo Client 實戰，適合全端開發者快速上手！