GraphQL and Apollo Client by Example: Part 8

We wrap up this series by re-implementing the previous example in TypeScript.

This article is part of a series starting with GraphQL and Apollo Client by Example: Part 1.

The final solution of the updated (and TypeScript) application is available for download.

TypeScript + React + Apollo Client

We first need to scaffold a new TypeScript + React project:

npx create-react-app hello-apollo-boost-ts --scripts-version=react-scripts-ts

and install Apollo Client:

yarn add apollo-boost react-apollo graphql

and update:

src / index.tsx

note: Running the application at this point will generate an error involving AsyncIterator that is fixed by updating tsconfig.json as described in this issue.

Connecting to React

As before we update:

src / index.tsx

We then implement the following React components (and insert the Todo2 component into App.tsx):

src / components / Todos2 / Todo2.tsx

src / components / Todos2 / index.tsx

Observations:

• The general pattern provided here closely follows the official documentation; Using Apollo with TypeScript
• In working through this example; one will observe that both the data and error values are optional and that the result (allTodos) is also optional; this was challenging to figure out

Local State Management

We now introduce the counter local state. As before, we update:

• src / index.tsx

We re-introduce the following files; with slight tweaks to support TypeScript.

• src / graphql / defaults.ts
• src / graphql / resolvers.ts
• src / graphql / typeDefs.ts

Observations:

• Was unsuccessful in determining the proper typing in resolver.js; and thus could not avoid the any type

We then re-introduce the following files; again with slight tweaks to support TypeScript.

• src / components / Counter.tsx
• src / components / Decrement.tsx
• src / components / Increment.tsx

Wrap Up

Hope you found this series helpful.

Addendum

In working in a “real” project, I observed a number of additional patterns that I wanted to share:

• src / components / Counter2 / index.tsx: Demonstrates using multiple queries and mutations
• src / components / Counter3 / index.tsx: Additionally demonstrates how to use parameterized mutations
• src / components / Counter4 / index.tsx: Uses react-adopt to flatten the nesting of the components; did not chase down all the TypeScript issues nor am I fully convinced that the nesting is overly horrible

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.