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:

8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 â‹… 16 min read
how to truncate text in CSS (single and multi-line)

How to truncate text in CSS (single and multi-line)

Learn how to truncate text with three dots in CSS, and use two reliable CSS text truncation techniques while covering single-line and multi-line truncations.

Chinedu Okere
Jun 20, 2025 â‹… 10 min read
how to use the Interest Invoker API for better, more accessible UX

How to use the Interest Invoker API for better, more accessible UX

Explore how to use Google’s new experimental Interest Invoker API for delays, popovers, and smarter hover UX.

Emmanuel John
Jun 19, 2025 â‹… 7 min read
How To Build And Deploy A Web App With Bolt.new

How to build and deploy a web app with Bolt

Bolt.new revolutionizes how you build and deploy web apps with no-code development and seamless AI integration.

Isaac Okoro
Jun 19, 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