Hygraph is a federated content platform that enables developers to unify data from different sources, structure it for specific use cases, and distribute it to any platform worldwide. It uses a GraphQL-native API, allowing for flexible data modeling, efficient querying, and seamless integration with remote sources. Learn more at Hygraph About Us.
What is backend-for-frontends (BFFs) architecture and how does Hygraph support it?
Backend-for-frontends (BFFs) architecture involves creating a dedicated backend for each frontend application, which fetches, filters, and structures data specifically for that client. Hygraph supports BFFs by allowing you to model application data, connect remote sources, and serve precise data requests using its GraphQL API. This approach reduces over- and under-fetching, improves performance, and simplifies frontend development. Source: How to use GraphQL to build backend-for-frontends (BFFs).
How does Hygraph use GraphQL for backend-for-frontends?
Hygraph leverages GraphQL to build backend-for-frontends by modeling application data and integrating remote data sources. This enables frontend applications to request exactly the data they need, improving performance and flexibility. Hygraph's API provides out-of-the-box documentation and supports granular queries, making it ideal for BFF solutions. Source: How to build backend-for-frontends with Hygraph.
Features & Capabilities
What are the key features of Hygraph?
Hygraph offers a GraphQL-native API, content federation, digital asset management, localization, remote source integration, and a globally distributed CDN for optimized content delivery. It also provides an intuitive UI, robust security features, and extensive integrations with platforms like Netlify, Vercel, Shopify, AWS S3, and more. For a full list, visit Hygraph Features and Hygraph Integrations.
Does Hygraph provide an API for content management?
Yes, Hygraph provides a powerful GraphQL API for fetching and managing content. The API supports queries and mutations for reading, writing, and publishing content, and includes an API playground for testing and exploring your schema. Learn more at Hygraph API Reference.
What integrations does Hygraph support?
Hygraph supports integrations with hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (BigCommerce, commercetools, Shopify), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. For details, visit Hygraph Integrations.
How does Hygraph optimize content delivery performance?
Hygraph's globally distributed CDN ensures 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.
Security & Compliance
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.
How does Hygraph secure its API and content?
Hygraph requires authentication for API access, using permanent auth tokens with configurable permissions for reading, creating, and publishing content. This ensures only authorized users can access or modify content. Source: How to build backend-for-frontends with Hygraph.
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 more details, visit the Hygraph Pricing Page.
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. Companies that benefit most include modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. Source: ICPVersion2_Hailey.pdf
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. For more, visit Hygraph Case Studies.
Can you share specific customer success stories with 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 at Hygraph Customer Stories.
Who are some of Hygraph's customers?
Notable customers include Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details, visit Hygraph Case Studies.
Pain Points & Solutions
What problems 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). For more details, visit Hygraph Product Page.
How does Hygraph solve pain points for different personas?
For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it provides an intuitive interface for independent content updates. For business stakeholders, Hygraph lowers operational costs, accelerates speed-to-market, and supports scalability. Solutions are tailored to each persona's needs. Source: Hygraph Product Page.
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 details, visit Hygraph Blog on CMS KPIs.
Implementation & Support
How easy is it to get started with Hygraph?
Hygraph is designed for easy onboarding, even for non-technical users. You can sign up for a free account and use resources like documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. Learn more at Hygraph Documentation.
What training and technical support does Hygraph offer?
Hygraph provides 24/7 support via chat, email, and phone, onboarding sessions for enterprise customers, training resources (video tutorials, documentation, webinars), and access to Customer Success Managers. For more details, visit 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, while all users can access documentation and the community Slack channel. Source: Hygraph Contact Page.
Documentation & Learning Resources
Where can I find Hygraph's technical documentation?
Comprehensive technical documentation is available at Hygraph Documentation, covering everything from setup to advanced integrations.
What kind of content is available in the Hygraph Blog?
The Hygraph Blog features developer tutorials, product updates, essential guides to content modeling, and industry insights. Visit Hygraph Blog for more.
Getting Started & Onboarding
How do I sign up for Hygraph?
You can sign up for a free-forever account at Hygraph Platform and start building projects immediately.
What resources are available to help me get started with Hygraph?
Resources include the Hygraph Documentation, video tutorials, onboarding guides, and community support channels. These help users navigate the platform and implement solutions effectively. Source: Hygraph Documentation.
Customer Feedback & Ease of Use
What do customers say about Hygraph's ease of use?
Customers praise Hygraph for its intuitive interface and ease of setup, noting that even non-technical users can start using it right away. The UI is described as logical and user-friendly, making it accessible for both technical and non-technical teams. Source: Customer Feedback.
Newsletter & Updates
How can I stay updated with Hygraph news and releases?
You can sign up for the Hygraph newsletter to receive updates on releases and industry news. Source: Newsletter Signup.
How to use GraphQL to build backend-for-frontends (BFFs)
In this article, you'll learn about backend-for-frontend architecture by building a backend-for-frontend to serve blog posts from Hygraph.
Written by Anshuman
on Dec 07, 2022
Building a backend to serve multiple clients—mobile, web, and desktop—can get complicated over time. The requirements and capabilities of these clients can differ significantly, and accommodating them all can leave your backend bloated. For mobile apps, this can cause a decline in performance due to over-fetching unnecessary data, while devices with larger screens may suffer from under-fetching data, forcing the application developers to filter and format the data best suited for each client. These added responsibilities and computing requirements on the frontend make it harder to adapt to rapid development and changes.
One solution to this problem is creating a layer of backend-for-frontends. In this design, each frontend application has a dedicated backend responsible for fetching the resources from microservices and returning the proper response for this specific client. Backend-for-frontends do all the fetching, filtering, and structuring for the data requested, so the frontend applications get the exact data they asked for—nothing more, nothing less.
In this article, you'll learn about backend-for-frontend architecture by building a backend-for-frontend to serve blog posts from Hygraph. While doing so, you'll model your application's data and use remote data sources behind a backend-for-frontend. You'll get a deeper understanding of GraphQL, its advantages, and how it can serve as a backend-for-frontend with Hygraph.
BFFs sit in the middle of the micro-services and frontend applications, as shown in the following image.
BFFs customize the response and error handling specific to each client application so the frontend applications don't have to. By doing so, BFFs enhance the architecture and provide the following advantages over traditional backends:
No under/over-fetching: By serving every client based on its specific requirements, BFFs ensure that the client gets what they need and nothing more. By doing this, BFFs save network bandwidth and reduce the risk of exposing sensitive information to clients.
Separation of concerns: Using a layer of BFFs relieves the frontend from needing to format data, which allows developers flexibility in choosing and structuring their microservices, without the need to change the frontend. Clients usually don't need to be changed when a microservice is replaced or changes its API contract, because the BFFs are responsible for ensuring resilient APIs.
Fewer network calls: Because BFFs can fetch the data from multiple resources at once, the client doesn't have to make multiple calls to get all the information. A good example of this is fetching nested information, such as a blog post that contains an author. The BFF can return the author's data with the blog post rather than forcing the client to first request the blog post, then request the author data associated with it.
GraphQL is a query language that simplifies your API by representing the business model as graphs. Graphs define the data structure as objects and how they relate, similar to how humans perceive information. Because of this, the query and its response have identical structures, making it easier to understand and access information. GraphQL provides complete API documentation straight out of the box, and enables developers to structure their queries in the way best suited for the application. GraphQL's query implementation puts the control in the hands of the client to ask for granular data, ensuring there's no under- or over-fetching. The ability to request data with this granularity makes GraphQL a perfect BFF solution.
Hygraph is a federated content platform that enables developers to unify data from different sources, structure it the way that works for their specific use case, and distribute it to any platform worldwide. As the name suggests, Hygraph's API uses GraphQL, which comes with documentation that makes it simpler to understand the API data model and how different data nodes relate to each other. Hygraph offers numerous features such as digital asset management to store and serve optimized media content, and remote sources to connect multiple data sources to Hygraph, allowing the clients can read from a single backend.
On the dashboard, create a new project by selecting the Blank tile from the list.
Give your new project a name and description, then click on the Create project button.
When the project has been created, open the Schema page by clicking the icon on the left navigation. On the Schema page, click on the Add button next to Models, which will bring up a pop-up. Give your model a display name of "Blog post", an API ID of "BlogPost", and a plural API ID of "BlogPosts", then click Create Model to create the BlogPost content model.
Select the Blog post model from the left navigation. Now, add a new Single line text field from the right pane and name it "slug". You'll use this field to store the blog post's slug.
Access Hashnode API Using Remote Sources
On the Schema page, click the Add button next to Remote Sources to add Hashnode's GraphQL API as a remote source. Give it a display name of "Hashnode API", and the prefix of "HashnodeAPI". Set the type to GRAPHQL, and the base URL as https://api.hashnode.com, which is the API endpoint for Hashnode. Click Create in the top right corner of the screen.
Return to the Blog post model page, and add a new GraphQL field from the right-hand pane. In the form's Query section, select the Post query, and add {{doc.slug}} to reference the slug for the document. Add the hostname for your Hashnode account, which will allow Hygraph to dynamically fetch the blog content from the blog post’s slug.
Secure the Hygraph API
By default, the Hygraph Content API rejects unauthenticated requests. To securely access the Content API, you must create a Permanent Auth Token on the Settings page.
Open the Settings page through the cog icon near the bottom of the left-hand panel. In the Permanent Auth Tokens section, click the Create token button.
Create a new token with the name "Blog post token", and select Published as the default stage for content delivery, then click Create & configure permissions.
On the token permissions page, copy and save the token value for later usage, then click the Create permission button.
The Create permission form will pop up. Select the Blog post model, and assign the following permissions:
Read: Locales: All; Stages: All
Create: Locales: All
Publish: Locales: All; From stages: All; To stages: All
Click on the Create button to save permissions.
With the security measures in place, no one can access the content without the authorized token, and the token is only authorized to read, create, and publish content.
Interacting With the BFF
Hygraph uses GraphQL queries and mutations for reading and updating content. Hygraph prepares a default set of queries and mutations for each data model you create to allow simple workflows such as reading, writing, or publishing. You modify these premade queries to suit your use case, or you can also create your own from scratch.
You can use the Hygraph playground section to explore the documentation that Hygraph generated based on the schema. You can also prepare queries and mutations and test them before using them in your application.
You'll need a GraphQL client, such as ApolloGraphQL, to use Hygraph as a BFF.
The following example uses ApolloGraphQL to connect to the Hygraph BFF in any JavaScript application.
Begin by navigating again to the Settings page on your Hygraph dashboard, then to the Endpoints page. Copy the Content API endpoint.
Inside the project, run yarn add @apollo/client graphql to install the GraphQL client dependencies.
Create a new file called ./apollo-client.js, and add the following code to connect to the Apollo GraphQL client. Use the Content API endpoint copied above as the uri, and the permanent authorization token in the authorization value.
// replace this with the permanent authorization token copied above
authorization:`Bearer ${process.env.AUTH_TOKEN}`,
},
};
});
const client =newApolloClient({
link: authLink.concat(httpLink),
cache:newInMemoryCache(),
});
exportdefault client;
Use the GraphQL client's query function with the gql expression to query the blog posts. Notice how you can select different fields based on the application requirements. For example, the code below requests only the title field in the blogContent remote source field of published blog posts.
importclientfrom"../../apollo-client";
import{ gql }from"@apollo/client";
asyncfunctiongetPublishedBlogPosts(){
const{ data }=await client.query({
query: gql`
query getBlogBySlug {
blogPosts(stage: PUBLISHED) {
slug
blogContent {
title
}
}
}
`,
});
return data
}
You can easily fine tune the required fields in the gql query to suit your client's needs.
To add a new blog post, use the GraphQL client’s mutate function. The following example creates a new post and publishes the newly created blog post:
You've successfully built a BFF using Hygraph. In doing so, you've learned about content modeling, federation, and distribution with Hygraph, as well as how to secure this content. You've also learned about GraphQL and its advantages for data fetching, and how to use GraphQL to serve content from Hygraph as a BFF.
You can extend the example above to add more remote sources for blogs, such as Forem'sDEV API. You can also collect the likes from all blogging platforms, store them in the blog post, and serve them from Hygraph to your blog.
Hygraph is a federated content platform with an intuitive data modeling and distribution API. It offers localization, remote sources, digital asset management, and many other features straight out of the box. Its globally distributed CDN makes it highly performant for serving both assets and information. Sign up for a free account today to get started.
Blog Author
Anshuman Bhardwaj
Anshuman is a seasoned software engineer who loves writing and teaching. A craftsman of React and JavaScript, he enjoys solving everyday problems with code and sharing his learnings with the world.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.