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:

Build AI Agent Without Langchain JS

LangChain.js is overrated; Build your AI agent with a simple fetch call

Skip the LangChain.js overhead: How to build a Retrieval-Augmented Generation (RAG) AI agent from scratch using just the native `fetch()` API.

Ikeh Akinyemi
Oct 9, 2025 ⋅ 3 min read
the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 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