What is Hygraph and how is it used to build an internal company wiki?
Hygraph is a cloud-based headless CMS platform that enables you to create databases, tables, and powerful GraphQL APIs for content management. In the context of building an internal company wiki, Hygraph serves as the backend and content management system, while Next.js is used for the frontend. You can model data for employees, company policies, business glossaries, and course videos, and fetch data from remote sources like BambooHR and Cloudinary using Hygraph's content federation capabilities. Learn more in the tutorial.
How do I get started with Hygraph?
You can get started by signing up for a free account at Hygraph. Once registered, you can create a new project, define your data models, and begin adding content. Comprehensive documentation, onboarding guides, and video tutorials are available to help you set up and use the platform effectively. Access Hygraph Documentation.
What technical documentation is available for Hygraph?
Hygraph provides extensive technical documentation covering setup, API usage, integrations, and advanced features. This includes guides for building and deploying projects, API reference, and integration instructions. Explore Hygraph Documentation.
Features & Capabilities
What are the key features of Hygraph?
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports integrations with platforms like BambooHR (for employee data), Cloudinary (for asset management), and many others. Hygraph enables rapid content delivery, flexible schema modeling, and secure API access. See all features.
Does Hygraph provide an API for content management?
Yes, Hygraph provides a powerful GraphQL API for fetching and managing content. You can use this API to query data models, integrate with external sources, and build dynamic applications. Learn more about the API.
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. These integrations enable seamless workflows for hosting, eCommerce, localization, asset management, personalization, and AI. See all integrations.
How does Hygraph ensure optimized content delivery performance?
Hygraph is designed for rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized delivery reduces bounce rates and increases conversions. Learn more about performance.
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 detailed pricing and feature breakdowns, visit the Hygraph pricing page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection. Hygraph also offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. See security features.
Use Cases & Benefits
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. See case studies.
What business impact can customers expect from using Hygraph?
Customers can expect significant time savings, faster speed-to-market, improved operational efficiency, and enhanced customer experience through scalable and consistent content delivery. These benefits help organizations modernize their tech stack and achieve measurable ROI. Learn more.
What pain points does Hygraph solve?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky user experiences), 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). See more details.
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 success stories.
Technical Requirements & Implementation
What are the prerequisites for building a company wiki with Hygraph?
You need Node.js v16 and npm v8 installed on your system. For the frontend, Next.js is used, and you will need dependencies such as Apollo Client, GraphQL Wrapper, and Marked for parsing Markdown. See prerequisites.
How long does it take to implement Hygraph for a project?
Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. The platform's intuitive interface and comprehensive resources enable fast onboarding and deployment. Read the Top Villas case study.
Support & Training
What customer support and training 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, webinars, and a community Slack channel. Contact Hygraph.
Customer Proof & Case Studies
Who are some of Hygraph's customers?
Hygraph is trusted by leading brands such as Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See customer case studies.
What industries are represented in Hygraph's case studies?
Hygraph's case studies span industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Explore case studies.
KPIs & Metrics
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, system uptime, speed of deployment, consistency in content across regions, user satisfaction scores, reduction in operational costs, ROI, time to market, maintenance costs, scalability metrics, and performance during peak usage. Read more about CMS KPIs.
How to Build an Internal Company Wiki from Scratch
In this tutorial, you’ll learn to create an internal company wiki from scratch. The backend and content management will be implemented with Hygraph, and the frontend with Next.js.
Written by Ravgeet
on Nov 16, 2022
A company wiki is a knowledge hub where organization-specific information can be easily accessed by the individuals working in an organization. Information in the hub can be related to engineering operations, hiring procedures, employee information, and other company-specific information. Creating and maintaining a company wiki can be complex, but tools like GraphQL and Hygraph (previously GraphCMS) can make it easier.
GraphQL is a query language for APIs that allows you to request and fetch only the data that you want.
Hygraph is a cloud platform for creating databases, tables, and powerful GraphQL APIs. It allows you to create content on the fly with features such as text editors, workflows, and advanced roles.
In this tutorial, you’ll learn to create an internal company wiki from scratch. The backend and content management will be implemented with Hygraph, and the frontend with Next.js.
For this tutorial, you’ll create four data models: employee data, a business glossary, company policy, and video courses. The employee data will be fetched from an external source like BambooHR, and the assets for video courses will be hosted on Cloudinary. Finally, you’ll use GraphQL APIs to fetch the data from Hygraph, and the data will be presented on a Next.js frontend website.
What tables are to a relational database database, models are to Hygraph. In Hygraph, you can create models and add fields to them.
To create a model, click Schema in the left sidebar to open the schema editor.
Creating the Company Policies Model
To create a model for storing company policies, click on Create Model button, and give the model the display name "Company Policy".
Click the Create Model button, then add the following fields to your model by clicking the appropriate tile in the right-hand column and giving it the specified name:
Title, a Single line text field.
Description, a Markdown field.
Creating the Business Glossaries Model
Follow the same steps you followed to create the Company Policy model to create a model for storing business glossaries. Give it the display name "Business Glossary", and add the following fields to it:
Title, a Single line text field.
Description, a Multi-line text field.
Creating the Course Videos Model
While you can upload your assets to Hygraph, for the purposes of this tutorial, let’s suppose that you want to host your assets on a third-party platform like Cloudinary. In this case, before you can set up the course videos model, you need to install the Cloudinary app on Hygraph. Follow Connect your Hygraph project to Cloudinary through the end of the "Install the Cloudinary App" section.
Once you have connected Cloudinary with Hygraph, create a model for storing course videos. Give it the display name "Course Video", and add the following fields to it:
Title, a Single line text field.
Video, a Cloudinary Asset field.
Creating Employees Model
For the employees, suppose that you want to fetch the data from another platform, like BambooHR. Hygraph allows you to fetch data from remote sources through a process known as content federation.
To get data from a remote source like BambooHR, create an account on BambooHR and add some employee-related data. On fresh signup, BambooHR will add some default data for you.
Once you have signed up for BambooHR and added employee information, click on the Profile button in the top right corner and select API Keys from the dropdown menu.
Create a new API key by giving it a name. Make note of the key and keep it somewhere safe, as you’ll be using it while setting up a remote source in Hygraph:
Next, to see the data sent by the BambooHR API, refer to the BambooHR API Authentication docs and then send a GET request to https://api.bamboohr.com/api/gateway.php/<YOUR_BAMBOOHR_DOMAIN_NAME>/v1/employees/<EMPLOYEE_ID>?fields=firstName,lastName,gender,jobTitle using an HTTP client like Postman.
Don't forget to replace the values for <YOUR_BAMBOOHR_DOMAIN_NAME>, <EMPLOYEE_ID>, and <YOUR_BAMBOOHR_API_KEY> in the above request.
If the employee ID exists, you’ll get a response containing the fields you passed in the request URL.
On Hygraph dashboard, visit the Schema tab in the left sidebar and then add a new Remote Sources for BambooHR by adding the following details:
Headers: Accept: application/json and Authorization: Bearer <YOUR_BAMBOOHR_API_KEY>
When connecting to a remote API, you can specify the shape of the response coming from the API with the help of a custom type definition. Still on the remote source form, scroll down and add the BambooHREmployee type with the following fields under the Custom type definition field:
typeBambooHrEmployee{
firstName:String
gender:String
id:String
jobTitle:String
lastName:String
}
Save the settings for the remote source, and create a new model for storing employee information. Give it the display name of "Employee", and add the following fields to it:
BambooHR ID, a Single line text field
External, a REST field. For this field, add the following details:
For the company wiki, you need to add data to the models. This data will eventually be shown on the frontend.
To add data to the models, click on Content in the left sidebar, and then add some data and external data sources, such as Cloudinary and BambooHR. Select the model to which you're adding the data, and then click Add entry. Fill in the fields that you created previously, then Save & add another until you've populated the model with data. When you're done, click Save & publish. Do this for each model.
By default, access to the Content API is forbidden. To get the data from Hygraph, you'll need to set up permissions.
To do so, first, visit the Project Settings in the left sidebar. Click on API Access under the ACCESS header. You’ll be provided with the GraphQL endpoint for the Content API. Make note of this, as you’ll use this endpoint to access the content.
Instead of providing public access to the API, you can protect it with an authentication token and add permissions to it. To do so, visit Project settings in the left sidebar, then click on Create token under the Permanent Auth Tokens section:
Fill in the details for your token by providing it a name, a default stage of your choice for content delivery, and an optional description:
Click Create & configure permissions to create your token. You'll be taken to the Create Permissions page, which displays the token at the top. Make note of this token, as you’ll be using it while fetching the content from the frontend:
Configure the permissions for the Auth token that you just created by clicking the Create permission:
For this app, you only want to allow read access to the content. Check the Read rule for all of the models in all locales, which will allow read access to every model in Hygraph.
With that, you can now access the contents in models using GraphQL queries. To see the data sent by Hygraph, open Postman, visit Auth tab, select Bearer Token as the type, and add the Hygraph auth token as the token's value:
Finally, send the following queries to get data for each model:
For the employees model:
query{
employees{
id
bambooHrId
external{
id
firstName
lastName
gender
jobTitle
}
}
}
For the company policy model:
query{
companyPolicies{
id
title
description
}
}
For the business glossary model:
query{
businessGlossaries{
id
title
description
}
}
For the video course model:
query{
courseVideos{
id
title
video
}
}
The backend setup for Hygraph is complete, and now you can set up the frontend to consume data from the backend.
You are now ready to build the Next.js frontend website for the company wiki. To create a Next.js project, run the following command in your terminal:
npx create-next-app@latest
On the terminal, when you are asked about the project‘s name, set it to "company-wiki". After that, all the npm dependencies will be installed.
After the installation is complete, navigate into the company-wiki directory and start the Next.js development server by running the following commands in your terminal:
cd company-wiki
npm run dev
This will start the development server on port 3000 and take you to localhost:3000. The first view of the Next.js website will look like this:
For this application, you need the following npm dependencies:
Apollo Client, which is a fully-featured GraphQL client with caching.
GraphQL Wrapper, which is a JavaScript implementation for GraphQL.
Marked, a low-level compiler for parsing Markdown.
Install the above dependencies by running the following command in your terminal:
npm i @apollo/client graphql marked
Since everyone likes to style their app in their own way, this tutorial will skip styling the app, and instead concentrate on core functionality.
You need to set up a GraphQL Apollo Client to communicate with the Hygraph Content API.
To do so, first, create a config directory in the project’s root directory. Then, in the config directory, create a file called apolloClient.js and add the following code to it:
Replace YOUR_HYGRAPH_CONTENT_API_ENDPOINT with your Hygraph Content API endpoint, which is located in Project Settings / Access / API Access, and <YOUR_HYGRAPH_PERMANENTAUTH_TOKEN> with your Hygraph permanent auth key, which is located in Project Settings / Access / API Access / Permanent Auth Tokens.
Open the _app.js file in the pages directory and replace the existing code with the following code:
// 1
import{ApolloProvider}from"@apollo/client";
import{ client }from"../config/apolloClient";
functionMyApp({Component, pageProps }){
return(
// 2
<ApolloProviderclient={client}>
<Component{...pageProps}/>
</ApolloProvider>
);
}
exportdefaultMyApp;
In the above code:
You import the ApolloProvider from the @apollo/client library and the client object that you created earlier.
You wrap the Component with ApolloProvider, which allows you to access custom hooks and functions defined by @apollo/client anywhere in your Next.js application.
Creating the Company Wiki Home Page
Open the index.js file in the pages directory and replace the existing code with the following code:
importLinkfrom"next/link";
exportdefaultfunctionHomePage(){
return(
<>
<divclassName="mb-4">
<h1>Welcome to Company Wiki</h1>
</div>
<divclassName="d-flex flex-column">
<Linkhref="/employees"passHref>
<aclassName="mb-3">Employees</a>
</Link>
<Linkhref="/company-policies"passHref>
<aclassName="mb-3">Company Policies</a>
</Link>
<Linkhref="/business-glossary"passHref>
<aclassName="mb-3">Business Glossary</a>
</Link>
<Linkhref="/course-videos"passHref>
<aclassName="mb-3">Course Videos</a>
</Link>
</div>
</>
);
}
In the code, you define and export the HomePage component, in which you provide links to Employees, Company Policies, Business Glossary, and Course Videos.
Save your progress and visit localhost:3000, where you should see something similar to this:
Note that because styling has been left to the reader, your page may look slightly different. However, the core aspects of it—the title and the links to the pages—should be present.
Creating the Employees Page
Create an employees.js file in the pages directory and paste in the following code:
The explanation above is how each page is created. The numbered steps are the same, and all that changes is the name of the component in steps two and five. As such, while the full code for each page is given, the remaining pages won't have an explanation after them.
Creating the Company Policies Page
Create a company-policies.js file in the pages directory and add the following code to it:
As a bonus, you can also deploy your company wiki to a platform like Vercel. You'll need a Vercel account for this part of the tutorial.
To do so, initialize a Git repository in your local project directory, then commit and push the changes to an upstream GitHub repository.
Import your repository to Vercel.
Vercel will automatically detect the framework. Add the project's environment variables and their respective values, then click on Deploy to start the build:
Once the build is complete, you’ll see the deployment URL.
Finally, visit the deployment URL and you’ll see your Next.js website.
In this tutorial, you learned to create an internal company wiki from scratch. You implemented the backend and content management with Hygraph, and the frontend with Next.js. You also learned to create and fetch data from a remote source in Hygraph. Finally, you learned to manage assets on a third-party host like Cloudinary.
The entire source code for this tutorial is available in this GitHub repository.
Blog Author
Ravgeet Dhillon
Ravgeet Dhillon is a full-time software engineer and technical content writer who codes and writes about React, Vue, Flutter, Laravel, Node, Strapi, and Python. Based in India, he helps startups, businesses, and open source organizations with software consultancy.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.