Introduction:
Debugging refers to the process of identifying and resolving errors or bugs in a computer program. This typically involves locating a code error, reproducing it if necessary, and then using debugging tools and techniques to investigate and identify the root cause of the problem. Once the issue is understood, developers can take action to fix it.
The Significance of Debugging:
- Debugging is important because it helps us identify errors in the source code of React.
- When we implement GraphQL API in React, you can’t find any errors in the source code.
- Debugging tools help you to find logical errors or syntax issues, manage asynchronous code, ensure that data is fetched and updated correctly, construct queries correctly, and return the data you expect.
- React is a component-based approach, so you may need to debug GraphQL queries and mutations in each component where they are used.
- Sometimes, GraphQL queries are called multiple times. Debugging tools can help identify the issue and improve the application’s performance.
An overview of some key debugging tools
1) http://localhost:8080/o/api
- Click on the following link, http://localhost:8080/o/api , to redirect to the Liferay O API page.
![Liferay api Explorer | Debugging React.js and GraphQL in Liferay Liferay API Explorer](https://www.ignek.com/wp-content/uploads/2024/02/Liferay-api-Explorer-1024x476.webp)
- When you click on the GraphQL tab, it will redirect you to the GraphQL playground and run the API.
![Graphql API | Debugging React.js and GraphQL in Liferay Graphql API](https://www.ignek.com/wp-content/uploads/2024/02/Graphql-API-1024x476.webp)
- If you want to perform a mutation, please add the necessary variables for the mutation.
![Mutation variables | Debugging React.js and GraphQL in Liferay Mutation variables](https://www.ignek.com/wp-content/uploads/2024/02/Mutation-variables-1024x478.webp)
2) Developer tools
- Developer tools, such as the Network and Console tabs, are commonly used to debug and monitor GraphQL queries and mutations in a web application built with React or any other technology. These tools provide valuable insights into network requests, response data, and JavaScript console logs, helping developers identify and resolve issues related to GraphQL queries and mutations.
- If you wish to use the console for debugging during API integration, use console.log for regular messages and console. error for handling errors.
- Press the F12 button to open the console then go to the Network tab and find the filter field and write graphql.
![Filter Graphql in Network | Debugging React.js and GraphQL in Liferay Filter Graphql in Network](https://www.ignek.com/wp-content/uploads/2024/02/Filter-Graphql-in-Network-1024x244.webp)
- Now, refresh the console, and you will be able to see all GraphQL queries and mutations.
- Here, you can view the payload, preview, and data response hierarchy.
![API response | Debugging React.js and GraphQL in Liferay API response](https://www.ignek.com/wp-content/uploads/2024/02/API-response-1024x376.webp)
3) GraphiQL – developer tool
- Graphiql is an open-source developer tool for graphql API debugging and NPM package for react application.
- Npm command for GraphiQL:
npm i graphiql
- First search GraphiQL chrome extension and download that.
![GraphiQL chrome extension | Debugging React.js and GraphQL in Liferay GraphiQL chrome extension](https://www.ignek.com/wp-content/uploads/2024/02/GraphiQL-chrome-extension-1024x433.webp)
- Next, open GraphiQL in Chrome and click the icon. It will prompt you to enter the URL of the API; please insert it and run a query.
![Exploring GraphQL with GraphiQL | Debugging React.js and GraphQL in Liferay Exploring GraphQL with GraphiQL](https://www.ignek.com/wp-content/uploads/2024/02/Exploring-GraphQL-with-GraphiQL-1024x478.webp)
4) Apollo studio
- Apollo Studio is a platform and suite of tools offered by Apollo GraphQL, a company that specializes in GraphQL solutions. Apollo Studio is specifically designed to assist developers, teams, and organizations in building, managing, and monitoring GraphQL APIs more efficiently. It provides various features and services to improve the overall GraphQL development experience.
- Apollo Studio provides a schema for queries and a free API explorer for query validation.
- Open Apollo Studio Explorer paste the endpoint URL and click the run button to show the response of the API.
![Run Graphql query | Debugging React.js and GraphQL in Liferay Run Graphql query](https://www.ignek.com/wp-content/uploads/2024/02/Run-Graphql-query-1024x476.webp)
- Click the schema button and you will see the schema of the API.
![schema of the API | Debugging React.js and GraphQL in Liferay schema of the API](https://www.ignek.com/wp-content/uploads/2024/02/schema-of-the-API-1024x478.webp)
// Schema :
type Continent {
code: ID!
countries: [Country!]!
name: String!
}
input ContinentFilterInput {
code: StringQueryOperatorInput
}
type Country {
awsRegion: String!
capital: String
code: ID!
continent: Continent!
currencies: [String!]!
currency: String
emoji: String!
emojiU: String!
languages: [Language!]!
name(lang: String): String!
native: String!
phone: String!
phones: [String!]!
states: [State!]!
subdivisions: [Subdivision!]!
}
input CountryFilterInput {
code: StringQueryOperatorInput
continent: StringQueryOperatorInput
currency: StringQueryOperatorInput
name: StringQueryOperatorInput
}
type Language {
code: ID!
name: String!
native: String!
rtl: Boolean!
}
input LanguageFilterInput {
code: StringQueryOperatorInput
}
type Query {
continent(code: ID!): Continent
continents(filter: ContinentFilterInput = {}): [Continent!]!
countries(filter: CountryFilterInput = {}): [Country!]!
country(code: ID!): Country
language(code: ID!): Language
languages(filter: LanguageFilterInput = {}): [Language!]!
}
type State {
code: String
country: Country!
name: String!
}
input StringQueryOperatorInput {
eq: String
in: [String!]
ne: String
nin: [String!]
regex: String
}
type Subdivision {
code: ID!
emoji: String
name: String!
}
Discover the power of ReactJS Application Architecture. Streamline development with scalable, efficient structures. Master component-based design and state management for robust, flexible apps. Elevate your coding game with ReactJS architecture! Check out our “Hire Us” services to get started.