What is Hygraph and how does it work for branded short links?
Hygraph is a GraphQL-native headless CMS that enables you to model your schema and automatically provides a Query & Mutation API. For branded short links, you can use Hygraph to create and manage link models, track visits, and power serverless functions for custom link redirection and analytics. Learn more in the official tutorial.
How can I use Hygraph's GraphQL API for link shortener projects?
Hygraph provides a powerful GraphQL API that lets you fetch and manage content efficiently. For link shortener projects, you can define models for links and visits, then use queries to fetch destination URLs and mutations to track visits. Example queries and mutations are provided in the tutorial and the API Reference.
What are the steps to build a branded short link service with Hygraph?
To build a branded short link service with Hygraph, follow these steps:
Create a new Hygraph project and define your data region.
Model your Link and Visit schemas.
Set up relations between links and visits.
Create example links and configure scheduled publishing if needed.
Use GraphQL queries to fetch destination URLs by shortUrl.
Track visits with GraphQL mutations.
Configure your code project and serverless functions (e.g., with Vercel).
Deploy your service and set up preview URLs for quick access.
Detailed instructions are available in the official guide.
How do I implement logic into a serverless function using Hygraph?
You can use the gql import to encapsulate GraphQL queries and mutations. Pass the shortUrl from the page request to your query, fetch the destination URL, and track visits using mutations. This logic can be hosted on platforms like Vercel, which supports dynamic routing for serverless functions. See the tutorial for code examples.
What is the benefit of using serverless functions with Hygraph for branded short links?
Serverless functions allow you to deploy custom code to your own (sub)domain, keeping links on-brand. They can check if a link exists, track visits, redirect users, and perform additional logic. This approach provides flexibility, scalability, and improved analytics for your branded short link service. Source: Hygraph Blog.
How do I track visits to short links using Hygraph?
Every time a serverless function fetches a valid link, you can create a new visit entry using a GraphQL mutation. This allows you to track how many times each link is visited and analyze user engagement. Example mutation code is provided in the tutorial.
Can I schedule links to be published at a later time with Hygraph?
Yes, Hygraph supports scheduled publishing, allowing you to set future publish dates for your links. This is useful for managing campaigns or timed releases. Source: Hygraph Blog.
How do I add preview URLs for quick access to links in Hygraph?
You can add preview URLs in the Link model settings. This enables you to quickly visit each link from the CMS interface, streamlining testing and management. Source: Hygraph Blog.
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.
Integrations & Technical Requirements
What integrations does Hygraph support?
Hygraph supports integrations with 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 the Hygraph Integrations page.
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation is available at Hygraph Documentation, covering setup, API usage, integrations, and more.
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. More details are available on the Hygraph Security Features page.
What security features does Hygraph offer?
Hygraph provides SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. Source: Hygraph Security Features.
Use Cases & Customer Success
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. Source: ICPVersion2_Hailey.pdf.
What industries are represented in Hygraph's case studies?
Industries include food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. See Hygraph Case Studies for details.
Can you share specific customer success stories using Hygraph?
Yes. Komax achieved 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. More stories are available here.
How easy is it to get started with Hygraph?
Hygraph is designed for quick onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months. You can sign up for a free account and use documentation and onboarding guides to get started. Source: Hygraph Documentation, Top Villas Case Study.
Support & Implementation
What support is available after purchasing Hygraph?
Hygraph offers 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. More details at the Hygraph Contact Page.
What training and technical support does Hygraph provide for onboarding?
Hygraph provides onboarding sessions for enterprise customers, 24/7 support, training resources (video tutorials, documentation, webinars), and Customer Success Managers for expert guidance. Source: Hygraph Contact Page.
Performance & Business Impact
How does Hygraph optimize content delivery performance?
Hygraph emphasizes rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. This leads to reduced bounce rates and increased conversions. More details at this page.
What business impact can customers expect from using Hygraph?
Customers can expect time-saving through streamlined workflows, ease of use, faster speed-to-market, and enhanced customer experience via scalable content delivery. These benefits help modernize tech stacks and improve operational efficiency. Source: ICPVersion2_Hailey.pdf.
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 speed-to-market, and simplifies development with efficient query management and schema evolution. Source: Hygraph Product Page.
Customer Proof & Case Studies
Who are some of Hygraph's customers?
Hygraph is trusted by Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more at Hygraph Case Studies.
Getting Started & Resources
How can I get started with Hygraph?
You can sign up for a free-forever account at Hygraph. Resources like documentation, video tutorials, and onboarding guides are available to help you get started. Source: Hygraph Documentation.
Blog & Community
Where can I find the Hygraph blog and developer tutorials?
The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit Hygraph Blog for more information.
Build your own branded short links with GraphQL & Serverless Functions
Learn how to use Hygraph GraphQL Queries & Mutations to power a simple link shortener project in this tutorial.
Written by Jamie
on Nov 22, 2021
Marketing teams for years have been using short URLs to track click origins, and of course, to shorten those long winded slug based URLs.
You've most likely seen something like https://bit.ly/graphcms. The issue with these links is that the .ly extension is rather confusing for those not familiar with it, and it's "off brand".
Thankfully we can use Serverless Functions to deploy our own code to a custom (sub)domain that is closer to our brand. These custom Serverless functions can check if the link exists, track a "visit", redirect to the destination URL, and of course do absolutely anything else in between.
⚡️ We'll be using Hygraph to model our GraphQL schema, and automatically provide a Query & Mutation API we can use.
📝 While Hygraph has great content editing features, I want to focus this tutorial on the APIs powering that, and how you can use the API directly to add new content entries, and relate them to other models.
Let's begin by creating a new Hygraph project. You'll need to give it a name, pick a region where the data will be stored, and click Create to confirm.
Now create the model Visit. This will be used to track every click to our Link we created earlier.
Once you've created the model, add a relation to the Link model we created earlier:
The relation will be a Many (Visit) to one (Link) relation. A Link has many Visits. You'll also want to make this a two way reference — we'll need this for a follow up guide on analytics later.
If you save, and visit the Link model schema once more, you should see the reverse relation to visits:
When we invoke a Serverless function, we'll want to pass the shortUrl from the URL the user is visiting, e.g. https://go.example.com/wtf and pass that onto a GraphQL query so we can fetch the destinationUrl if it exists.
Hygraph automatically creates queries for the model + fields we defined above.
The query will look something like this:
queryGetLinkByShortUrl($shortUrl:String!){
link(where:{shortUrl:$shortUrl}){
id
destinationUrl
}
}
Let's test this out with the Hygraph API Playground. Make sure to pass the variable shortUrl:
Success! Our query is returning the destinationalUrl. We'll use this later.
Every time someone invokes our Serverless function, and fetches a valid Link, we also want to track this link has been visited. We'll need to pass it the ID of the link we want to "connect".
Hygraph automatically creates mutations for the model + fields we defined above.
The mutation will look something like this:
mutationCreateNewVisitForLink($linkId:ID!){
createVisit(data:{link:{connect:{id:$linkId}}}){
id
}
}
Let's again test this out inside the Hygraph API Playground. Don't forget to pass the linkId:
Success! The GraphQL mutation successfully connected the visit to the link. You can verify this by querying for all links, and their visits, or by viewing the entry within the Content Editor:
In order for this to work, you'll need to obtain your HYGRAPH_ENDPOINT, and create a new Permanent Auth Token (as HYGRAPH_TOKEN ) and set this inside of the file .env:
HYGRAPH_ENDPOINT=
HYGRAPH_TOKEN=
You can configure this inside of your Project API Access settings:
The Permanent Auth Token should also have restricted access:
We'll then check the shortUrl passed into the query from the page request, which we can use to kick off our query. The reason we used square brackets [] around the filename shortUrl this is because we'll be hosting our Serverless function with Vercel, and they treat this as a dynamic route.
We now need to deploy this to Vercel. Go ahead and create an account, login, and install the CLI.
Once you're logged into the CLI, you'll want to run vc --prod to deploy your code to production.
If you then open the Vercel project settings to configure the domain, you can add an existing domain or new one and set it as the production domain for your project!
You should now have your very own branded short URL service deployed to your (sub)domain!
All of the code is available on GitHub, or you can deploy yourself using the button below!
Blog Author
Jamie Barton
Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.