Typowane resolvery z GraphQL Code Generator
Pisz resolvery z poprawnymi typami wejściowymi i zwracanymi.
Typowane resolvery z GraphQL Code Generator to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Problem typowania resolverów
Resolvery GraphQL są zwykłymi funkcjami, ale bez typowanych sygnatur łatwo zwrócić nieprawidłową strukturę. Codegen generuje typy resolverów, które wymuszają zwracanie prawidłowych wartości.
// Without typed resolvers — any type allowed
const userResolver = async (_, { id }) => fetchUser(id);Dodawanie wtyczki resolverów
Należy zainstalować i skonfigurować @graphql-codegen/typescript-resolvers, aby wygenerować typy mapy resolverów.
npm install --save-dev @graphql-codegen/typescript-resolverscodegen.yml dla resolverów
Należy dodać dane wyjściowe wtyczki resolverów obok bazowych typów TypeScript.
# codegen.yml
generates:
src/generated/types.ts:
plugins:
- typescript
src/generated/resolvers.ts:
plugins:
- typescript-resolversUżywanie wygenerowanej mapy resolverów
Należy zastosować wygenerowany typ Resolvers do obiektu mapy resolverów, aby uzyskać pełne bezpieczeństwo typów.
import { Resolvers } from "./generated/resolvers";
const resolvers: Resolvers = {
Query: {
user: async (_, { id }) => fetchUser(id),
// Return type enforced: must match User schema
},
};Typowanie kontekstu
Należy przekazać typ kontekstu do generyku Resolvers, aby funkcje resolverów otrzymywały typowany obiekt kontekstu.
interface Context { db: Database; user?: AuthUser; }
// codegen.yml
config:
contextType: "src/context#Context"
// Generated: Resolvers<Context>
const resolvers: Resolvers<Context> = {
Query: {
me: (_, __, ctx) => ctx.user, // ctx: Context
},
};Typy mapujące
Typy mapujące pozwalają mapować typy GraphQL na wewnętrzne typy modelu, dzięki czemu resolvery mogą zwracać obiekty domenowe zamiast typów wynikowych GraphQL.
# codegen.yml
config:
mappers:
User: "src/models#UserModel"Typowanie resolverów pól
Indywidualne resolvery pól typów również są typowane, w tym ich argumenty parent i kontekstu.
// Typed field resolver on User type
const resolvers: Resolvers<Context> = {
User: {
fullName: (parent) => `${parent.firstName} ${parent.lastName}`,
// parent is UserModel (from mapper)
},
};Typowane mutacje
Resolvery mutacji otrzymują typowane argumenty wejściowe wyprowadzone z typów wejściowych schematu.
// Schema: createUser(input: CreateUserInput!): User!
const resolvers: Resolvers = {
Mutation: {
createUser: (_, { input }) => {
// input: CreateUserInput — fully typed
return createUser(input.name, input.email);
},
},
};Typowane subskrypcje
Resolvery subskrypcji mają funkcję subscribe i funkcję resolve, a obie są typowane przez codegen.
const resolvers: Resolvers = {
Subscription: {
messageAdded: {
subscribe: () => pubsub.asyncIterator("MESSAGE_ADDED"),
resolve: (payload) => payload.messageAdded, // typed
},
},
};Utrzymywanie synchronizacji codegen
Należy dodać hook pre-build lub pre-commit, aby ponownie generować typy resolverów po zmianie schematu i zapobiegać trafianiu nieaktualnych typów do środowiska produkcyjnego.
// package.json
{
"scripts": {
"predev": "graphql-codegen",
"prebuild": "graphql-codegen"
}
}Podsumowanie: typowane resolvery
Wtyczka codegen typescript-resolvers generuje typ Resolvers, który wymusza prawidłowe struktury zwracanych wartości, typy argumentów i strukturę kontekstu we wszystkich resolverach GraphQL.
Szybkie sprawdzenie
Co robi opcja konfiguracyjna contextType w codegen?
Czego się Państwo nauczyli
Typowane resolvery GraphQL generowane przez codegen wymuszają prawidłowe typy zwracane, struktury argumentów i obiekty kontekstu w całej mapie resolverów. Należy używać typów mapujących dla obiektów domenowych i uwzględnić codegen w potoku budowania, aby zapobiegać rozbieżnościom.
Często zadawane pytania
Czy lekcja „Typowane resolvery z GraphQL Code Generator” jest bezpłatna?
Tak — pełny tekst „Typowane resolvery z GraphQL Code Generator” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Typowane resolvery z GraphQL Code Generator”?
Pisz resolvery z poprawnymi typami wejściowymi i zwracanymi. Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?
Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Typowane resolvery z GraphQL Code Generator”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?
Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Schemat GraphQL na typy TypeScript
- Typowane resolvery z GraphQL Code Generator
- Typowany klient GraphQL z Apollo i urql
- Bezpieczeństwo typów od końca do końca: schemat jako źródło