Data Fetching with GraphQL

GraphQL is an open-source query language for APIs that allows clients to request only the specific data they need from the server. Unlike traditional REST APIs that return entire resources, GraphQL enables precise and flexible data retrieval.

• Clients can specify exactly which fields they want in a query.
• Reduces unnecessary data transfer and improves network efficiency.
• Returns structured responses that match the requested query format.

Fetching GraphQL Data with React

React applications commonly use Apollo Client to fetch and manage GraphQL data efficiently.

Step 1: Create a React Application

Create a new React project using the following command.

npx create-react-app graphql

Step 2: Move to the Project Folder

Navigate to the created project directory.

cd graphql

Project Structure:

👁 react-str

Step 3: Configure Apollo Client in App.js

Apollo Client connects the React application to a GraphQL API and manages queries along with caching of data.

Create Apollo Client:

Wrap the Application with ApolloProvider:

ApolloProvider wraps the main App component and provides access to the GraphQL client across all components in the application.

Step 4: Define a GraphQL Query

The following query retrieves a list of Pokémon with selected fields.

Step 5: Fetch Data Using useQuery

Apollo provides the useQuery hook to execute queries and handle loading and error states.

Complete App.js Code

Output:

👁 file

Fetching GraphQL Data Using Fetch API

The Fetch API can be used to send GraphQL queries directly to a GraphQL endpoint using HTTP requests. It allows developers to retrieve data from a GraphQL server without using additional client libraries.

Step 1: Create the GraphQL Query

Define the GraphQL endpoint and write the query to request the required data.

Step 2: Configure Fetch Options

Set the HTTP request method and include the GraphQL query in the request body.

Step 3: Send the Request

Use the Fetch API to send the query to the GraphQL server and process the response.

Complete fetchGraphQL.js Code

Output:

👁 data

Fetching Data with GraphiQL

GraphiQL is an interactive in-browser IDE used to explore and test GraphQL APIs. It allows developers to write queries, execute them, and view responses with helpful features like auto-completion and syntax highlighting.

Step 1: Create a Basic GraphQL Server

Create a simple Node.js server that exposes a GraphQL endpoint and enables the GraphiQL interface.

Filename: server.js

Step 2: Start the Server

Run the following command in the terminal to start the Node.js server.

node server.js

Output:

Server running on http://localhost:4000/graphql

Step 3: Test the Query in GraphiQL

Open the GraphiQL interface in the browser and run the following query.

query {
 hello
}

Output:

👁 file