Let’s Get Started Building A Weather App with GatsbyJS, TypeScript, Recoil and React!

Introduction

Building an internet hosted weather app is a useful way to learn how to consume an API endpoint. If you can consume a public api like this, then you can work with a back end developer who is providing data to you from a database for example.

You need GatsbyJS

Wait! If you have never used GatsbyJS you will need to install it first. Please head to this page and set up your system with the necessary tooling (GatsbyJS and so on) before you attempt this tutorial. Thanks!

Our first bits of code

src/pages/apps/weather.js

import React from 'react';
//  components
import Seo from '../../components/seo';
//  content
import Content from '../../content-apps/weather';
//  content-seo
import descriptionSeo from '../../content-apps/weather/seo/description';

const PageContent = ({ location }) => <Content location={location} />;

export default PageContent;

export const Head = ({ location }) => (
  <Seo description={descriptionSeo} location={location} title="Weather" />
);

src/content-apps/weather/index.ts

import React, { lazy, Suspense } from 'react';
import { Text } from '@chakra-ui/react';
import { ErrorBoundary } from 'react-error-boundary';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
//  components
import LoadingScreen from '../../components/loading-screen';
//  local components
const GeoLocation = lazy(() => import('./data/geo-location'));

const queryClient = new QueryClient();

const Content = () => {
  return (
    <ErrorBoundary fallback={<Text>Something went wrong.</Text>}>
      <QueryClientProvider client={queryClient}>
        <Suspense fallback={<LoadingScreen />}>
          <GeoLocation />
        </Suspense>
      </QueryClientProvider>
    </ErrorBoundary>
  );
};

export default Content;

These are the entry points of our app. I am using GatsbyJS, so the entry point to the app is always in the src/pages directory somewhere. That is simply how GatsbyJS functions.

I like to separate my content to a different directory set because the pages directory really can only handle one file for a page. I have found filling it with directories is cumbersome. I like making a single file for my web page entry point.

The content is a little special. I am experimenting with React.lazy and React.Suspense in order to improve app performance. The reason why this can be good is because this app relies on external data, and the lazy Suspence features will help reduce apparent lag to the end-user when getting data from the api service.

I am also wrapping everything in an ErrorBoundary so that if something goes wrong in the underlying code, the end-user will be notified of that and not some other shit instead.

And all of our data is being grabbed using react-query .

What Now?

Ah, you will have to wait for the next exciting installment dear coder.

Thank you for reading thus far.

Happy coding and creating! 🌦️⚛️

#GatsbyJS #TypeScript #ReactJS #ReactQuery #Recoil #ChakraUI #WeatherApp #FrontendDev #WebDev #CodingTips

Photo by Bjark on Unsplash