Integrate Hygraph with Svelte, React, Vue

Graph CMS or Hygraph CMS is a headless CMS for building backend for web and mobile apps. It is easy to use.

The Graphql which is modern way to fetch selected part of a database, enable developers to easily access the data in Hygraph.

Integrate Hygraph with Svelte

The first step is to enable public API from the Hygraph settings and then we can use libraries like urql, apollo, graphql-request for querying data.

In the Svelte Kit route we can place a load module on the top of the component for fetching data as follows .

//route/index.svelte

<script context="module">
    import {GraphQLClient} from "graphql-request";
    export async function load({params}) {
        const {slug} = params;
        const graphcms = new GraphQLClient(
            'https://api-ap-south-1.hygraph.com/v2/cl5uo7orr3kf801t8d4ld7hoe/master',
            {
                headers: {},
            }
        )
        const data = await graphcms.request(
            `query  {
        blogpost(where: {slug: "${slug}"})
        {
            title
            catgory
            content{
            html
            }
            publishedAt
            summary
            image {
            fileName
            url
        }
        }
    }`
        );
 return{
     props: {
         post: data.blogpost,
     },
 }
    }

</script>

<script>
    export let post;

</script> 

Similarly we can apply the logic on Angular Service, Vuejs, React, and Solidjs.

I have two projects on Github for you 🎦

• Svelte Blog
• Solidjs Blog

• Graphgql :Querying single document in Prismic
• Integrate Hygraph with Svelte, React, Vue
• Hygraph : Graphql headless CMS
• Integrate Contentful in Vue 3
• Headless CMS recommendation
• Integrate contentful CMS in Nextjs
• Create contentful blog with Solidjs
• Create contentful blog with Svelte
• Contentful service in Angular
• Create a contentful plugin nuxt 3