ไคลเอนต์ GraphQL ที่ระบุชนิดด้วย Apollo และ urql

ปัญหาการกำหนดชนิดข้อมูลให้ไคลเอ็นต์

// Without codegen: data is any
const { data } = useQuery(GET_USER);
data.user; // any — no safety

ปลั๊กอินการดำเนินการสำหรับ Apollo

npm install --save-dev @graphql-codegen/typescript-operations
npm install --save-dev @graphql-codegen/typescript-react-apollo

codegen.yml สำหรับฮุกของ Apollo

# codegen.yml
documents: "src/**/*.graphql"
generates:
  src/generated/operations.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

การเขียน query ที่มีชนิดข้อมูล

# src/queries/GetUser.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

การใช้ฮุกที่สร้างขึ้น

import { useGetUserQuery } from "./generated/operations";

function UserCard({ id }: { id: string }) {
  const { data, loading } = useGetUserQuery({ variables: { id } });
  if (loading) return <p>Loading...</p>;
  return <p>{data?.user?.name}</p>; // data.user: User | null — typed
}

urql ร่วมกับการสร้างโค้ด

npm install --save-dev @graphql-codegen/typescript-urql
# Similar codegen.yml configuration, generates useGetUserQuery for urql

TypedDocumentNode

import { TypedDocumentNode } from "@graphql-typed-document-node/core";
const GetUserDoc: TypedDocumentNode<GetUserQuery, GetUserQueryVariables> = gql`...`;
// Works with Apollo, urql, and any GraphQL client that supports it

ชนิดข้อมูลของแฟรกเมนต์

# UserFields.graphql
fragment UserFields on User {
  id
  name
}
# Generated: UserFieldsFragment type — use as prop type

mutation ที่มีชนิดข้อมูล

import { useCreateUserMutation } from "./generated/operations";

const [createUser, { loading }] = useCreateUserMutation();
// createUser({ variables: { input: { name, email } } })
// — variables are fully typed

ทำให้การดำเนินการสอดคล้องกัน

npx graphql-codegen --check
# or with graphql-inspector:
npx graphql-inspector validate ./src/**/*.graphql ./api/schema.graphql

สรุป: ไคลเอ็นต์ GraphQL ที่มีชนิดข้อมูล

ตรวจสอบความเข้าใจ

สิ่งที่คุณได้เรียนรู้