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:

Glowing 3D cube with the MediaPipe and React logos overlaid, symbolizing integration of AI and web development

How to build better AI apps in React with MediaPipe’s latest APIs

Learn how to integrate MediaPipe’s Tasks API into a React app for fast, in-browser object detection using your webcam.

Emmanuel John
Jul 17, 2025 â‹… 10 min read
Vercel AI SDK logo on a 3D black grid background

How to build unified AI interfaces using the Vercel AI SDK

Integrating AI into modern frontend apps can be messy. This tutorial shows how the Vercel AI SDK simplifies it all, with streaming, multimodal input, and generative UI.

Ikeh Akinyemi
Jul 16, 2025 â‹… 13 min read
how to prepare for a software engineering interview

How to prep for a software dev interview: Advice from a dev leader

Interviewing for a software engineering role? Hear from a senior dev leader on what he looks for in candidates, and how to prepare yourself.

Andrew Evans
Jul 16, 2025 â‹… 12 min read
Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 â‹… 19 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