Web Developers : 2-Building a React Application with Apollo Client and a Public GraphQL API

Screenshot from the tutorial

Building a React Application with Apollo Client and a Public GraphQL API

In the modern web development landscape, combining React with GraphQL has become increasingly popular. The flexibility of GraphQL allows developers to fetch only the data they need, making applications more efficient. In this tutorial, we will walk through the process of building a React application using Apollo Client to interact with a public GraphQL API.

Prerequisites

Before diving into the tutorial, ensure you have the following:

1. Node.js and npm: Make sure you have Node.js and npm installed on your machine. You can download them from Node.js official website.
2. Basic knowledge of React: Familiarity with React concepts, such as components, state, and props, will be beneficial.
3. Understanding of GraphQL: While not mandatory, a basic understanding of GraphQL will help you grasp the concepts better.

Setting Up the Project

Step 1: Create a New React Application

To get started, create a new React application using Create React App. Open your terminal and run the following command:

npx create-react-app graphql-react-app
cd graphql-react-app

Step 2: Install Apollo Client

Next, you need to install Apollo Client and its dependencies. Run the following command in your project directory:

npm install @apollo/client graphql

• @apollo/client: The main package that allows you to integrate Apollo Client with your React application.
• graphql: A library that provides the necessary GraphQL functionalities.

Configuring Apollo Client

Step 3: Create Apollo Client Instance

Create a new file named ApolloClient.js in the src directory. This file will contain the configuration for Apollo Client.

// src/ApolloClient.js
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/', // Public GraphQL API
  cache: new InMemoryCache(),
});

export default client;

Step 4: Wrap Your Application with ApolloProvider

Now, you need to wrap your application with ApolloProvider in the src/index.js file. This will allow you to access the Apollo Client throughout your React application.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import client from './ApolloClient';
import { ApolloProvider } from '@apollo/client';

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

Fetching Data with GraphQL

Step 5: Create a Query

In this step, you will create a GraphQL query to fetch data from the public API. Let's create a new component called CountryList.js to display a list of countries.

// src/CountryList.js
import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_COUNTRIES = gql`
  query GetCountries {
    countries {
      code
      name
      capital
    }
  }
`;

const CountryList = () => {
  const { loading, error, data } = useQuery(GET_COUNTRIES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.countries.map((country) => (
        <li key={country.code}>
          <h2>{country.name}</h2>
          <p>Capital: {country.capital}</p>
        </li>
      ))}
    </ul>
  );
};

export default CountryList;

Step 6: Integrate the CountryList Component

Finally, integrate the CountryList component into your main application component (App.js).

// src/App.js
import React from 'react';
import CountryList from './CountryList';

const App = () => {
  return (
    <div>
      <h1>Countries</h1>
      <CountryList />
    </div>
  );
};

export default App;

Running the Application

With everything set up, you can now run your React application. Open your terminal and execute the following command:

npm start

This will start your local development server, and you can view your application in your browser at http://localhost:3000. You should see a list of countries displayed, along with their capitals.

Conclusion

In this tutorial, we explored how to build a React application using Apollo Client to fetch data from a public GraphQL API. This setup allows you to leverage the power of GraphQL and React together, creating efficient and dynamic applications.

Feel free to extend this application by adding more features, such as search functionality or country details. The possibilities are endless!

For more information, visit the Apollo Client documentation and the GraphQL documentation. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios