2021-07-29
3186
#apollo#graphql#react#typescript
Trey Huffine
2480
Jul 29, 2021 â‹… 11 min read

Build a GraphQL + React app with TypeScript

Trey Huffine Trey is the founder of Skilled.dev, teaching developers how to ace their technical interviews. He also created gitconnected.com, providing tools for developers to automate their job search, and the Level Up Coding publication, which receives 3M+ monthly views.

Recent posts:

Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 â‹… 11 min read
How To Use The CSS Cursor Property

How to use the CSS cursor property

A single line of CSS can change how users feel about your UI. Learn how to leverage the cursor property to signal intent, improve interaction flow, and elevate accessibility.

Chizaram Ken
May 28, 2025 â‹… 6 min read
Build TypeScript App Vite

How to build a React + TypeScript app with Vite

We explore the benefits of building an app with React, TypeScript, and Vite, and compare its performance to the same app built with CRA.

Clara Ekekenta
May 28, 2025 â‹… 7 min read

How to use Claude to build a web app

Learn how to build a weather app using Claude, from setting up infrastructure to creating a functional UI that displays city-based forecasts.

Andrew Evans
May 28, 2025 â‹… 8 min read
View all posts

3 Replies to "Build a GraphQL + React app with TypeScript"

  1. Hi – thanks for the article, very informative.

    I noticed a couple of minor points:

    1. At the step “The final step is to refetch the data when the id changes. Inside the LaunchList/index.tsx file…” this should refer to LaunchProfile/index.tsx.
    2. When running the final code, I get:
    “`
    ./src/components/LaunchProfile/index.tsx
    Line 16: React Hook React.useEffect has a missing dependency: ‘refetch’. Either include it or remove the dependency array react-hooks/exhaustive-deps
    “`
    This can be fixed by adding `refetch` to the dependency list.
    3. The following step is fairly obvious, but maybe worth showing the actual code changes since all the other steps do this? “Inside LaunchList/index.tsx, be sure to import the OwnProps declaration to type the props being passed to the container component, and then spread the props into the .”

    Thanks again!

  2. Awsome tutorial! I think with the new version of react apollo, we need to update the article accordingly!

    There are 2 small issues that I found:
    – After running `$(npm bin)/graphql-codegen init`, it will complain about `@graphql-codegen/typescript-react-apollo` not found. We need to manually update it from `1.17.8` to `2.0.6`
    – We should use `@apollo/client` and `@apollo/react-hooks` instead of `apollo-boost`, `react-apollo`, `react-apollo-hooks`. Then it would be come
    “`js
    import React from ‘react’;
    import ReactDOM from ‘react-dom’;
    import { ApolloClient, ApolloProvider, InMemoryCache, NormalizedCacheObject } from ‘@apollo/client’;
    import { ApolloProvider as ApolloHooksProvider } from ‘@apollo/react-hooks’;
    import ‘./index.css’;
    import App from ‘./App’;

    const client = new ApolloClient({
    uri: ‘https://spacexdata.herokuapp.com/graphql’,
    cache: new InMemoryCache()
    });

    ReactDOM.render(

    ,
    document.getElementById(‘root’),
    );
    “`

Leave a Reply