You can get started with Hygraph by signing up for a free-forever account at our platform. Comprehensive resources such as the Hygraph Documentation, video tutorials, and onboarding guides are available to help you navigate and implement the platform effectively.
How long does it take to implement Hygraph, and how easy is it to start?
Hygraph is designed for quick and easy implementation, even for non-technical users. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Customers can get started quickly by signing up and using the available documentation and onboarding guides. Source
Features & Capabilities
What features does Hygraph offer?
Hygraph provides a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. Key features include a powerful GraphQL API, integrations with popular tools (e.g., Netlify, Vercel, Shopify, AWS S3, Cloudinary), localization support, digital asset management, personalization, and AI integrations. For a full list, visit the Hygraph Features page.
Does Hygraph provide an API?
Yes, Hygraph offers a robust GraphQL API for efficient content fetching and management. You can learn more at the Hygraph API Reference.
What integrations are available with Hygraph?
Hygraph integrates with a wide range of platforms, 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 more details, visit the Hygraph Integrations page.
How does Hygraph optimize content delivery performance?
Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. Learn more
Is there technical documentation available for Hygraph?
Yes, Hygraph offers comprehensive technical documentation covering all aspects of building and deploying projects. Access it at Hygraph Documentation.
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.
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 high levels of data protection and security. For more details, visit the Hygraph Security Features page.
How does Hygraph ensure data security and compliance?
Hygraph provides enterprise-grade security features, including SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. Learn more
Support & Training
What customer 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 detailed documentation, video tutorials, and a community Slack channel. Contact Hygraph
What training and onboarding resources does Hygraph provide?
Hygraph provides onboarding sessions for enterprise customers, training resources such as video tutorials, documentation, webinars, and access to Customer Success Managers for expert guidance. Learn more
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 is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale globally or improve development velocity. Source
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. Source
What problems does Hygraph solve?
Hygraph addresses operational pains (e.g., reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, 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 and integration issues). Learn more
What are some real-world success stories of customers using Hygraph?
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. More case studies are available on the Hygraph Case Studies page.
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. See all case studies
Technical Requirements & Developer Experience
How does Hygraph work with SvelteKit and urql?
Hygraph can be integrated with SvelteKit using urql, a GraphQL client. This setup enables efficient querying of Hygraph's GraphQL API within SvelteKit projects, leveraging Svelte's context API and file-based routing for dynamic content delivery. For a step-by-step guide, see the official tutorial.
Where can I find examples of using Hygraph with SvelteKit?
What developer resources are available for Hygraph?
Hygraph provides extensive developer resources, including technical documentation, API references, tutorials, and a community Slack channel. Access these resources at the Hygraph Documentation and Hygraph Blog.
Customer Proof & Recognition
Who are some of Hygraph's customers?
Hygraph is trusted by organizations such as Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more on the Hygraph Case Studies page.
What feedback have customers given about Hygraph's ease of use?
Customers have praised Hygraph for its intuitive and user-friendly interface, noting that it is 'super easy to set up and use' and accessible for both technical and non-technical users. Source
KPIs & Metrics
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, number of updates made without developer intervention, system uptime, speed of deployment, consistency in content across regions, user satisfaction scores, reduction in operational costs, ROI on CMS investment, time to market, maintenance costs, scalability metrics, and performance during peak usage. Read more
In this tutorial, we take a look at how to build a basic blog using urql, SvelteKit, Svelte, Hygraph, and GraphQL.
Written by Scott
on Oct 27, 2021
urql is GraphQL client primarily built for use in React, it's also where it's name comes from (Universal React Query Library) it's a highly customizable lightweight GraphQL client that can be used to query any GraphQL endpoint.
URQL now has Svelte Bindings so, let's take a look at getting it configured with a SvelteKit project.
First up, I'll spin up a new SvelteKit project with the npm init command:
# note it's `svelte@next` until SvelteKit goes v1
npm init svelte@next using-urql-with-sveltekit
From the CLI prompts, I'll chose the following Skeleton project > No to Use TypeScript > No to Add ESLint for code linting > Yes to Add Prettier for code formatting.
Now I can follow the rest of the instructions from the CLI, change directory (cd) into the newly created project directory, npm install dependencies, skip the optional step to create a git repo and to run the dev script:
I'll check that the skeleton SvelteKit project is working as expected. If it is, I can kill the development server, install the additional dependencies for urql, and the JavaScript implementation of the GraphQL query language:
npm i -D @urql/svelte graphql
Before I set up the urql client, I'll need a GraphQL endpoint to query against. For this, I'll use the Hygraph blog starter template!
If you're following along and you don't have a Hygraph account already then you can sign up here for a new account; otherwise, log into your existing account and select the Blog starter from the Create a new project section.
Now in the Hygraph project I can go to Settings then select the API Access section and copy the Content API from the Endpoints section. Clicking the URL will copy it to my clipboard.
I can add the Content API URL directly to the code in the project but I prefer to use a .env file to store the endpoint URL. I'll create a .env file in the project root directory:
touch .env
I'll also need to add .env to the .gitignore file so it's not committed to git:
Now to set up the urql client, I can define the urql client inside some <script> tags in a .svelte file like so:
<script>
import { initClient } from '@urql/svelte'
initClient({
url: import.meta.env.VITE_GRAPHQL_URL,
})
</script>
Note: in SvelteKit there's the option to run the load function, which runs before the component is created. More details on that in the SvelteKit documentation.
There's note of an error in the urql documentation that may occur, Function called outside component initialization.
This can be encountered when trying to use the client in <script context="module"> tags.
urql takes advantage of the Svelte Context API, you can add the client to a parent component which will be shared to it's children, the SvelteKit layout file is a great place to put this.
To use the client in other pages/routes I'll define it once in a __layout.svelte file. I'll need to create that now:
touch src/routes/__layout.svelte
In the src/routes/__layout.svelte file I'll add the following:
<script>
import { initClient } from '@urql/svelte'
initClient({
url: import.meta.env.VITE_GRAPHQL_URL,
})
</script>
<slot />
I'm using the urql convenience function, initClient. This combines the createClient and setClient calls into one. This method internally calls Svelte's setContext function.
This will manage all the GraphQL requests for the project.
Note: import.meta.env is for using environment variables in SvelteKit, you can read up more on Env Variables and Modes in the Vite documentation.
Once I validated that query in the API Playground, I can use that in the SvelteKit project using the urql operationStore function, this creates a Svelte writable store:
In the src/routes/index.svelte file I'll add the following:
<script>
// urql initialization
import { gql, operationStore, query } from '@urql/svelte'
Let's quickly break down what's happening here, the $ on $posts is to subscribe to Svelte writable store returned from urql.
I can check to see if the posts are fetching by urql if they are return a loading message, if there's an error return an error message, otherwise return the posts in an unordered list.
Then I can loop through the posts with the Svelte each directive.
Great! That's it, I've created my first query using urql and displayed the results on a page.
I can expand on this now using SvelteKit file based routing to display a single post from the ${post.slug} read on if you're interested in that.
Now, I want to link to a post from the list on the index page. To do that I'll create a new route in the src/routes for posts then add a [slug].svelte in there:
# make the directory
mkdir src/routes/posts
# make the [slug].svelte file
touch src/routes/posts/'[slug].svelte'
Now, I have a route defined I'll create a GraphQL query in the Hygraph API Playground:
// slug is passed as a parameter in the operationStore function
const post = operationStore(productQuery, { slug })
query(post)
</script>
Now, it's a case of rendering out the post data. As the fields being queried are almost identical to what is being done on the index page I'm going to create a <Post> component that can be used on the index route and the post route.
# make a lib folder
mkdir src/lib
# make the Post component
touch src/lib/post.svelte
I can take the markup used in the index page and add it to the <Post> component:
I'm passing in some props here, the post data and a copy boolean that I can use to conditionally render either the post.excerpt (for the index page) or the post.content.html (for the post page).
I've created a simple blog using Svelte, SvelteKit, urql, GraphQL, and Hygraph. Using urql to create a GraphQL client that can be shared around the project.
Then defined some queries in the Hygraph API Playground and used them with urql to retrieve data from the Hygraph GraphQL API.
Used SvelteKit's file based routing to display a single post with a GraphQL query to filter on the slug variable being passed to the posts/[slug].svelte file.
Finally, I reused the markup on the index page and moved it into a Svelte component to be used by both the index page and the posts/[slug].svelte file with some conditional rendering.
That's it! hope you found it useful!
The full source code for this example can be found on my GitHub
Blog Author
Scott Spence
Developer Advocate @Hygraph • Learner of things • Jamstack • Svelte
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.