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:

react toastify

React-Toastify (2025 update): Setup, styling & real-world use cases

Learn how to use React-Toastify in 2025, from setup to styling and advanced use cases like API notifications, async toasts, and React-Toastify 11 updates.

Chimezie Innocent
Apr 18, 2025 â‹… 18 min read
5 Best Open Source Tools For Cross-Browser CSS Testing

5 best open source tools for cross-browser CSS testing

Discover open source tools for cross-browser CSS testing like Playwright and BrowserStack to catch rendering errors, inconsistent styling, and more.

Peter Aideloje
Apr 18, 2025 â‹… 11 min read
react suspense data fetching

How to handle data fetching with React Suspense

With the introduction of React Suspense, handling asynchronous operations like data fetching has become more efficient and declarative.

Ovie Okeh
Apr 18, 2025 â‹… 10 min read
Use TypeScript Instead Of Python For ETL Pipelines

Use TypeScript instead of Python for ETL pipelines

Build a TypeScript ETL pipeline that extracts, transforms, and loads data using Prisma, node-cron, and modern async/await practices.

Muhammed Ali
Apr 17, 2025 â‹… 6 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