Display Data in Your React App
You have to import the UserList or other components that use GraphQL API into your react application to display the fetched data.
// src/App.js
import React from 'react';
import UserList from './components/UserList';
function App() {
return (
<div>
<h1>GraphQL React App</h1>
<UserList />
</div>
);
}
export default App;
The explanation of the above code: The app.js is the entry point that controls the overall layout and structure of your app you can think of App.js as the headquarters of your React app. It’s where you decide how everything fits together.
- Importing Components: The UserList component is imported into your app.js file which has the job of fetching and showing the list of users using the GraphQL queries
- App Component: The App component acts like the main building of your app. It creates the overall structure and layout.
Inside App you use JSX (a special way to write HTML-like code in React) to design how the app will look like
- There’s a main container for everything (div).
- A big heading (h1) announces the app’s name (“GraphQL React App”).
- The UserList component displays its list of users.
Making it all work together: By placing the <UserList /> within the App component’s JSX, the UserList component will be rendered whenever the App component is rendered. This ensures that the data fetched using GraphQL queries in the UserList component will be displayed as a part of the application’s interface.
How to Integrate GraphQL APIs Into Your React.js Projects
Imagine a React.js world where you can specify exactly the data you need and it flows effortlessly tailored to your needs, and react can efficiently update the DOM as and when needed. No more under-fetching or over-fetching of data or wrestling with nested JSON structures.
This dream becomes a reality with the use of GraphQL the rising star of API technology. This article aims to help you integrate the GraphQL API with your React project.
Table of Content
- What is GraphQL
- Why GraphQL
- How to Integrate GraphQL APIs into Your React.js Projects
- Step 1: Set Up a React Application
- Step 2: Install Required Packages
- Step 3: Using Apollo, Configure the Apollo Client
- Step 4: Create GraphQL Queries
- Step 5: Fetch Data in React Components
- Step 6: Display Data in Your React App
- Step 7: Run Your Application