Hygraph is a GraphQL-native headless content management system (CMS) designed to unify data and enable content federation. It empowers businesses to create impactful digital experiences by removing traditional content management pain points and offering scalability, flexibility, and efficient data querying. Learn more at Hygraph Product Page.
Does Hygraph provide an API?
Yes, Hygraph offers a powerful GraphQL API for efficient content fetching and management. For technical details, visit the Hygraph API Reference.
Where can I find Hygraph's technical documentation?
Comprehensive technical documentation is available at Hygraph Documentation, covering everything you need to know about building and deploying projects with Hygraph.
What integrations does Hygraph support?
Hygraph supports a wide range of integrations, including Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. For a full list, visit Hygraph Integrations.
How does Hygraph optimize content delivery performance?
Hygraph emphasizes rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized delivery reduces bounce rates and increases conversions. For more details, visit this page.
Features & Capabilities
What are the key features and capabilities of Hygraph?
Hygraph offers GraphQL-native architecture, content federation, scalability, and a user-friendly interface. Key benefits include faster speed-to-market, control at scale, and lower total cost of ownership. Learn more at Hygraph Features.
How easy is Hygraph to use?
Customers consistently praise Hygraph for its intuitive and logical interface. Both technical and non-technical users can start using it right away, with feedback such as 'super easy to set up and use.' The platform is designed for accessibility and ease of adoption.
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more details, visit Hygraph Security Features.
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For full details, visit the Hygraph Pricing Page.
Use Cases & Benefits
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises seeking to modernize, and brands aiming to scale, improve development velocity, or re-platform from traditional solutions.
What industries are represented in Hygraph's case studies?
Hygraph's case studies span industries such as Food and Beverage (Dr. Oetker), Consumer Electronics (Samsung), Automotive (AutoWeb), Healthcare (Vision Healthcare), Travel and Hospitality (HolidayCheck), Media and Publishing, eCommerce, SaaS (Bellhop), Marketplace, Education Technology, and Wellness and Fitness. See more at Hygraph Case Studies.
Can you share specific customer success stories using Hygraph?
Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Explore more at Hygraph Customer Stories.
How long does it take to implement Hygraph, and how easy is it to start?
Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months from initial contact. Users can get started quickly by signing up for a free account and using resources like documentation and onboarding guides. Learn more at Hygraph Documentation.
What business impact can customers expect from using Hygraph?
Customers can expect significant time savings, streamlined workflows, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency.
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting global team needs, clunky content creation), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). For more details, visit Hygraph Product Page.
How does Hygraph solve these pain points?
Hygraph provides an intuitive interface for non-technical users, modernizes legacy systems with GraphQL-native architecture, ensures consistent branding via content federation, streamlines workflows to reduce costs, accelerates project delivery, and supports scalability. Technical pains are addressed with simplified development workflows, streamlined query management, and robust integration capabilities. See Hygraph Product Page for details.
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, system uptime, consistency in content across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more, visit Hygraph Blog on CMS KPIs.
Do the pain points solved by Hygraph differ by persona?
Yes. Developers benefit from reduced boilerplate code and streamlined queries; content creators and project managers gain independence from developers and improved user experience; business stakeholders see lower costs and improved scalability. Solutions are tailored to each persona's needs. More at Hygraph Product Page.
Competition & Comparison
Why choose Hygraph over alternatives in the market?
Hygraph stands out with its GraphQL-native architecture, content federation, and scalability. It enables impactful digital experiences, reduces costs, and improves efficiency. For more details, visit Hygraph Product Page.
Support & Implementation
What customer service and support does Hygraph offer?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. For more, visit Hygraph Contact Page.
What training and technical support is available to help customers get started?
Hygraph offers onboarding sessions for enterprise customers, 24/7 support, training resources such as video tutorials, documentation, webinars, and access to Customer Success Managers. More details at Hygraph Contact Page.
How does Hygraph handle maintenance, upgrades, and troubleshooting?
Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, and all users can access documentation and the community Slack channel for additional support.
React PropTypes & Developer Resources
What is React PropTypes?
React PropTypes is a method for validating the datatype of props passed to React components, ensuring that the data rendered is correct. It helps prevent bugs by validating data types and required props. Learn more at React PropTypes Documentation.
Why use PropTypes in React applications?
PropTypes help prevent bugs by validating the data type of props, ensuring they match expectations. As applications grow, PropTypes ensure required props are present and give more validation power, reducing unexpected production bugs.
How can PropTypes be used with Hygraph CMS?
PropTypes can be used to validate data fetched from Hygraph CMS, ensuring it matches expected types before rendering in React components. This helps maintain data integrity and prevents rendering issues.
Customer Proof & Case Studies
Who are some of Hygraph's customers?
Hygraph is trusted by companies such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more, visit Hygraph Case Studies.
Blog & Content Resources
Where can I find the Hygraph Blog?
The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit the Hygraph Blog for news and insights.
Who wrote the blog post 'How to Use PropTypes in React'?
The blog post was written by Joel Olawanle, a Frontend Engineer and Technical Writer based in Nigeria.
What does the blog post encourage readers to do?
The blog post encourages readers to sign up for the newsletter to stay informed about releases and industry news.
In this article, you will learn what ''PropTypes'' means, how it works, and the various validators you can use to validate your props.
Written by Joel
on Nov 30, 2022
When working with React components, you sometimes need to pass props from a parent to a child component. When passing down these props, you may make mistakes and cause bugs that are hard to detect by passing in values as a wrong data type. For example, if you are expected to pass an age prop which should be a number, you mistakenly passed the number as a string.
import{Profile}from'./Profile';
exportconstApp=()=>{
let user ={name:'John Doe',age:'23'};
return<Profile userDetails={user}/>;
};
If you want to maybe add to the age in the Profile component, it affects what will render on your React application. Also, unfortunately, React won’t throw an error; instead, it will render this as a concatenation.
exportconstProfile=({ userDetails })=>{
return(
<p>
{userDetails.name} is {userDetails.age+3}
years old
</p>
);
};
On the webpage, 233 years is rendered instead of 26 years because 23 was mistakenly passed in as a string. How about there is a way for you to check and validate each prop type that comes into a child component so it matches what you are expecting; else, it throws an error in your browser’s console.
By default, JavaScript does not have a built-in type-checking solution, so Microsoft introduced TypeScript. However, React has an internal method that you can use for props validation known as PropTypes.
In this article, you will learn what PropTypes is about, how it works, and when to use it. You will also learn the various types of PropTypes and, finally, see how it works with a real-world example that fetches content from Hygraph CMS.
As your React application grows, you’d become more intentional about the props you pass. You will want to ensure some props are required, set default values, and give props more validation power.
PropTypes serves as the method you can use to ensure the correct datatype is passed for each prop, meaning whatever is rendered is correct. It can also be used to ensure a value is passed, set default values, and lots more.
In plain terms, it is used as a validator to ensure the data your component receives is valid. There are many different types of PropTypes, and all have unique ES6 classes, which you can use.
Note: The significant difference between TypeScript and PropTypes is that propTypes is only checked in development mode while TypeScript performs these checks from your code environment.
If you don’t understand props well and what it means in React, let’s do a quick dive, so you can perfectly understand this article.
A prop is a short form for “properties”. You can use it to pass down data from a parent component to a child component. For example, if you fetch a list of products from an external in the App.js component, you also want to use these same products in a child component. Instead of having to fetch or pass the data again, you can pass down the data easily.
When working with functions, you would pass in arguments, which, when these arguments are not passed, will throw an error or break your application. This also applies to React component; you will sometimes want to pass required prop(s) or validate the datatype of each prop because failure to pass in the correct prop will affect your application’s behavior. You can do all these with PropTypes.
Also, when working on large applications for clients and with a team, it is always good to validate these props to avoid unexpected production bugs.
How to use PropTypes
Previously, before the release of React v15.5, PropTypes was inbuilt into the React package, but now it has been moved into a different package which you will first have to install into your project to make use of it.
You can install it in your project by running the following command in your terminal:
$ npm install prop-types --save
Once it has been installed, you will first have to import it into whichever component you want to use to access its features.
importPropTypesfrom'prop-types';
When you import it into your component, you can now attach the component name to the PropTypes method and create an object containing all your prop's validation.
importPropTypesfrom'prop-types';
exportconstProfile=(props)=>{
return(
<p>
{props.name} is {props.age+3}
years old
</p>
);
};
Profile.propTypes={
// Props validations here
};
Your PropTypes object will contain key-value pairs for each prop you validate, the key is the prop's name, and the value is the PropTypes validation (the type and other validation). Let's now explore the various Prop types with examples.
The PropTypes method holds a wide range of classes that you can use to validate and configure type definitions. These types will be grouped into sections, so they are easy to understand.
Basic types
The basic types are the regular data types you always use in JavaScript. This includes string, number, object, array, boolean, function, and symbol. You can only use them by attaching the PropTypes method.
ComponentName.propTypes={
anyValue:PropTypes.any,// the prop can be of any data type
myString:PropTypes.string,// prop should be a string
myNumber:PropTypes.number,// prop should be a number
myObject:PropTypes.object,// prop should be an object
myArray:PropTypes.array,// prop should be an array
myBoolean:PropTypes.bool,// prop should be boolean
myFunction:PropTypes.func,// prop should be a function
mySymbol:PropTypes.symbol,// prop should be a symbol
};
For example, if you pass three props which are name, age, and isLoggedIn, then you can configure their types:
importPropTypesfrom'prop-types';
exportconstProfile=({ name, age, isloggedIn })=>{
return(
<>
{isloggedIn &&(
<p>
{name} is {age +3}
years old
</p>
)}
</>
);
};
Profile.propTypes={
name:PropTypes.string,
age:PropTypes.number,
isloggedIn:PropTypes.bool,
};
You can make a prop required by attaching .isRequired, meaning when the prop is not passed, it will throw an error in our console.
Profile.propTypes={
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired,
isloggedIn:PropTypes.bool.isRequired,
};
When you don’t pass a particular prop, you will get an error like this in your console:
Multiple types
PropTypes can also allow you to set the type of values your props should be and the expected value. It allows you to set a limited set of values or multiple data types for a prop. This can be done using PropTypes.oneOf() and PropTypes.oneOfType() validators. These validators take in an array.
PropTypes.oneOf(): This validator can be used to set limited values for a prop. For example, if you want the value of your name prop to be either “John” or “Jane”. You can achieve this with this validator.
Profile.propTypes={
name:PropTypes.oneOf(['John','Jane']).isRequired,
// ...
};
This means when you pass in another value asides from “John” and “Jane” to the name prop, it will throw an error:
PropTypes.oneOfType(): Just like you can set limited values for your prop, you can also set multiple datatypes for your prop, meaning if you want a prop value to either be an array or object, you can set it with this validator.
Passing a value that may be a string to the arrayOrObject prop will throw an error to your console.
Collective types
You now know how these PropTypes work, and you have seen the basic types, similar to the regular data types in programming. Some other types help you validate more advanced types of props.
Array
Asides from PropTypes.array validator, which you can use for array types, PropTypes uses the PropTypes.arrayOf() validator to perform more fine-tuned validation of arrays. This method allows you to check the type of values in an array.
For example, your component might expect a prop with an array of numbers, and then you can use PropTypes.arrayOf() to validate only numbers.
In the code above, myObject prop will only accept an object with values that are string, such as:
myObject:{
pet:'cat',
food:'pizza',
},
When you maybe have a number as its value or introduce a new key-value pair such as age: 10, it will throw an error in your console.
Two other validators work with objects. These validators help you validate the type for each value in an object and can also help make the object closed, meaning when you add another key-value pair whose type is not declared it will throw an error. These two validators are:
PropTypes.shape(): This can be used to define a set of keys for an object and validate its data types. For example, if an object consists of name, age, and id, then you can validate the type for each key.
Profile.propTypes={
userDetails:PropTypes.shape({
id:PropTypes.number.isRequired,
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired,
}),
};
This means that when you pass a string as the age value, it will throw an error. When you define all these validations for each key in an object, you will notice that when you define a new key-value pair, you can use it within your application without validating its type. You can fix this using the PropTypes.exact() validator.
PropTypes.exact(): This validator can be used for strict or exact object matching. This means that it will throw an error when you have extra properties in the object you are validating:
Profile.propTypes={
userDetails:PropTypes.exact({
id:PropTypes.number,
name:PropTypes.string,
age:PropTypes.number,
}).isRequired,
};
Advanced type checking for components and component names
In some scenarios, you might have to pass in a component as a prop. To check if a prop is a component, you can use the PropTypes.element validator.
Component.propTypes={
elementProp:PropTypes.element
}
One significant advantage and common use for the PropTypes.element validator is to ensure that a component has only one child. If the component has no children or multiple children, it will display a warning on the JavaScript console.
Component.propTypes={
children:PropTypes.element.isRequired
}
Custom types
You have learned how to validate props with the default validators, but how about creating your validators. Suppose you want to validate the value of a prop to be sure it matches what you expect— maybe an email value.
You can do this by creating a custom validator. To create a custom validator, you will create a function that can take in three arguments which are:
props: The original object containing all the props passed to the component
propName: The name of the prop you want to validate
componentName: The name of the component
In the function, you can maybe use a regex to test if the value is an actual email, check for the length, and lots more, and then throw an error if the validation fails using new Error().
Profile.propTypes={
userDetails:PropTypes.shape({
// ...
email:function(props, propName, componentName){
const regex =/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;
if(!regex.test(props[propName])){
returnnewError(
`The prop ${propName} passed to ${componentName}is not a valid email address.`
);
}
},
}),
};
When you pass in a wrong email value, it will throw the error. You can also decide to extract the validator into a function, so your propTypes object is neat and easy to maintain.
`The prop ${propName} passed to ${componentName}is not a valid email address.`
);
}
};
Profile.propTypes={
userDetails:PropTypes.shape({
id:PropTypes.number,
name:PropTypes.string,
age:PropTypes.number,
email: isEmail,
}),
};
Setting the default prop value
So far, you have learned how to validate props, configure PropTypes, and lots more. It is also important to know that you can set a default value for each prop. You can do this similarly to how PropTypes work but this time, you would use defaultProps (there is no need to import it).
Profile.defaultProps={
userDetails:{
id:1,
name:'John Doe',
age:30,
},
};
Note: This will only work when you fail to pass in the userDetails prop to the component.
Let’s now use PropTypes validators in a real-life project to see how it works. Here is the source code for the project (a cocktail app that fetches content from Hygraph). On the Products.jsx page, which lists all available cocktails, the array is looped, and each object is passed as a prop to the Product.Jsx component.
On the Product.jsx component, the object is validated with the PropTypes.object.
Also, on the ProductDetails.jsx page, you will notice an object is passed into the CocktailInfo.jsx component, where each object value is validated using PropTypes.shape().
In this article, you have learned what PropTypes means, how it works, and the various validators you can use to validate your props.
Have fun coding!
Blog Author
Joel Olawanle
Joel Olawanle is a Frontend Engineer and Technical writer based in Nigeria who is interested in making the web accessible to everyone by always looking for ways to give back to the tech community. He has a love for community building and open source.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.