### Install and Run Example Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-focal-point-input/README.md Navigate to the project directory and start a local HTTP server to run the example. ```bash cd uix-focal-point npx http-server ``` -------------------------------- ### Install and Run Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-graphql-mesh/README.md Navigate to the project directory, install dependencies, and start the server. ```bash cd with-graphql-mesh npm install npm start ``` -------------------------------- ### Install and Run Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-houdini/README.md Navigate to the project directory, install dependencies, and start the development server. ```bash cd with-cd houdini npm install npm run dev -- --open ``` -------------------------------- ### Install and Run Project (npm) Source: https://github.com/hygraph/hygraph-examples/blob/master/using-remote-fields/README.md Install dependencies and run the example project using npm. ```bash cd using-remote-fields npm install npm run start ``` -------------------------------- ### Install and Run Hygraph Slinkity Example Source: https://github.com/hygraph/hygraph-examples/blob/master/with-slinkity/README.md After downloading the project, use these commands to install the necessary npm packages and start the development server. This prepares the project for local development and testing. ```bash cd with-slinkity npm install npm run start ``` -------------------------------- ### Install and Run Hygraph Gatsby Example Source: https://github.com/hygraph/hygraph-examples/blob/master/with-gatsby/README.md Navigate to the project directory, install dependencies, and start the development server using npm or yarn. ```bash cd with-gatsby npm install npm run dev ``` ```bash cd with-gatsby yarn yarn dev ``` -------------------------------- ### Install and Run SvelteKit Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-sveltekit/README.md Navigate into the project directory, install dependencies, and start the development server. ```bash cd with-sveltekit npm install npm run dev -- --open ``` -------------------------------- ### Install and Run Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nextjs/README.md Install dependencies and start the development server for the Next.js project. ```bash cd with-nextjs npm install npm run dev ``` ```bash cd with-nextjs yarn yarn dev ``` -------------------------------- ### Install and Run Locally (npm) Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-autofill-relation/README.md Install dependencies and start the development server using npm. ```bash cd uix-autofill-relation npm install npm run start ``` -------------------------------- ### Install and Run Project (npm) Source: https://github.com/hygraph/hygraph-examples/blob/master/using-management-sdk/README.md Navigate to the project directory, install dependencies using npm, and run the start script. ```bash cd using-management-sdk npm install npm run start ``` -------------------------------- ### Install and Run Project (yarn) Source: https://github.com/hygraph/hygraph-examples/blob/master/using-remote-fields/README.md Install dependencies and run the example project using yarn. ```bash cd using-remote-fields yarn yarn start ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-sveltekit-and-urql/README.md Use degit to clone the example project locally. Then, install dependencies and start the development server. ```bash npx degit hygraph/hygraph-examples/with-sveltekit-and-urql with-sveltekit-and-urql ``` ```bash cd with-sveltekit-and-urql npm install npm run dev -- --open ``` -------------------------------- ### Install Dependencies and Run Development Server Source: https://github.com/hygraph/hygraph-examples/blob/master/with-gatsby-image/README.md Navigate to the project directory and install dependencies using npm or yarn, then start the development server. ```bash cd with-gatsby-image npm install npm run dev ``` ```bash cd with-gatsby-image yarn yarn dev ``` -------------------------------- ### Install and Run Project (npm) Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-cloudinary-input/README.md Install dependencies and start the UI extension development server using npm. ```bash cd uix-cloudinary-input npm install npm run start ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-eleventy/README.md Use degit to clone the example project locally. Navigate into the directory, install dependencies, and start the development server. ```bash npx degit hygraph/hygraph-examples/with-eleventy with-eleventy ``` ```bash cd with-eleventy npm install npm run dev ``` -------------------------------- ### Install and Run Locally (yarn) Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-autofill-relation/README.md Install dependencies and start the development server using yarn. ```bash cd uix-autofill-relation yarn yarn start ``` -------------------------------- ### Install and Run UI Extension Locally (npm) Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-basic-input/README.md Install dependencies and start the development server using npm. ```bash cd uix-basic-input npm install npm run start ``` -------------------------------- ### Install and Run Project (yarn) Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-cloudinary-input/README.md Install dependencies and start the UI extension development server using yarn. ```bash cd uix-cloudinary-input yarn yarn start ``` -------------------------------- ### Install and Run UI Extension Locally (yarn) Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-basic-input/README.md Install dependencies and start the development server using yarn. ```bash cd uix-basic-input yarn yarn start ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-conditional-field/README.md Use npx to download the example project for the UI extension. This command fetches the project files to your local machine. ```bash npx degit hygraph/hygraph-examples/uix-conditional-field uix-conditional-field ``` -------------------------------- ### Install and Run Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-vuejs/README.md After downloading, navigate to the project directory and install dependencies using npm or yarn, then run the development server. ```bash cd with-vuejs npm install npm run dev ``` ```bash cd with-vuejs yarn yarn dev ``` -------------------------------- ### Download Project with degit Source: https://github.com/hygraph/hygraph-examples/blob/master/with-gatsby-filesystem-routing/README.md Use degit to quickly scaffold the project locally. Navigate into the project directory and install dependencies to get started. ```bash npx degit hygraph/hygraph-examples/with-gatsby-filesystem-routing with-gatsby-filesystem-routing ``` -------------------------------- ### Download Hygraph Slinkity Example Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-slinkity/README.md Use this command to download the Hygraph and Slinkity example project manually using degit. After downloading, navigate to the project directory, install dependencies, and start the development server. ```bash npx degit hygraph/hygraph-examples/with-slinkity with-slinkity ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-focal-point-input/README.md Use npx degit to download the uix-focal-point-input example project locally. ```bash npx degit hygraph/hygraph-examples/uix-focal-point-input uix-focal-point-input ``` -------------------------------- ### Install and Run Development Server Source: https://github.com/hygraph/hygraph-examples/blob/master/with-gatsby-filesystem-routing/README.md After downloading the project, install the necessary npm packages and start the development server using either npm or yarn. ```bash cd with-gatsby-filesystem-routing npm install npm run dev ``` ```bash cd with-gatsby-filesystem-routing yarn yarn dev ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-graphql-mesh/README.md Use npx degit to download the example project manually. ```bash npx degit hygraph/hygraph-examples/with-graphql-mesh with-graphql-mesh ``` -------------------------------- ### Install and Run Project (yarn) Source: https://github.com/hygraph/hygraph-examples/blob/master/using-management-sdk/README.md Navigate to the project directory, install dependencies using yarn, and run the start script. ```bash cd using-management-sdk yarn yarn start ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/using-management-sdk/README.md Download the example project manually using degit. Ensure you have Node.js and npm/yarn installed. ```bash npx degit hygraph/hygraph-examples/using-management-sdk using-management-sdk ``` -------------------------------- ### Download Example Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-graphcms-image/README.md Use degit to download the example project manually. Then, install dependencies and run the development server. ```bash npx degit hygraph/hygraph-examples/with-graphcms-image with-graphcms-image ``` ```bash cd with-graphcms-image npm install npm run dev ``` ```bash cd with-graphcms-image yarn yarn dev ``` -------------------------------- ### Install and Run Locally Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-conditional-field/README.md Install project dependencies and start the development server using npm or yarn. This allows you to run the UI extension locally for testing. ```bash cd uix-conditional-field npm install npm run start ``` ```bash cd uix-conditional-field yarn yarn start ``` -------------------------------- ### Download Hygraph Gridsome Example Source: https://github.com/hygraph/hygraph-examples/blob/master/with-gridsome/README.md Use this command to download the example project manually. Navigate into the project directory and install dependencies. ```bash npx degit hygraph/hygraph-examples/with-gridsome with-gridsome cd with-gridsome npm install npm run dev ``` -------------------------------- ### Install Dependencies and Run Go Application Source: https://github.com/hygraph/hygraph-examples/blob/master/with-golang/README.md Navigate to the project directory, download Go modules, and run the main application file. ```bash cd with-golang go mod download go run main.go ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/using-asset-upload/README.md Use degit to clone the example project for asset uploads. ```bash npx degit hygraph/hygraph-examples/using-asset-upload using-asset-upload ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/using-remote-fields/README.md Download the 'using-remote-fields' example project using npx degit. ```bash npx degit hygraph/hygraph-examples/using-remote-fields using-remote-fields ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-upload-proxy/README.md Use npx to download the example project locally. This command fetches the 'with-upload-proxy' template from the Hygraph examples repository. ```bash npx degit hygraph/hygraph-examples/with-upload-proxy with-upload-proxy ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-graphql-codegen/README.md Use degit to clone the example project locally. After downloading, install dependencies and run the development server. ```bash npx degit hygraph/hygraph-examples/with-graphql-codegen with-graphql-codegen ``` ```bash cd with-graphql-codegen npm install npm run dev ``` ```bash cd with-graphql-codegen yarn yarn dev ``` -------------------------------- ### Download Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/using-union-types/README.md Use npx degit to download the example project manually. This command fetches the project template from the specified GitHub repository. ```bash npx degit hygraph/hygraph-examples/using-union-types using-union-types ``` -------------------------------- ### Download Project with Degit Source: https://github.com/hygraph/hygraph-examples/blob/master/with-express/README.md Use npx degit to quickly download the project template. Navigate into the project directory, install dependencies, and start the server. ```bash npx degit hygraph/hygraph-examples/with-express with-express cd with-express npm install npm run start # or cd with-express yarn yarn start ``` -------------------------------- ### Download Hygraph Nuxt.js Example Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs/README.md Use this command to download the example project manually using degit. ```bash npx degit hygraph/hygraph-examples/with-nuxtjs with-nuxtjs ``` -------------------------------- ### Download Hygraph Bynder UI Extension Example Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-bynder-input/README.md Use this command to download the example project for the Hygraph Bynder UI extension. ```bash npx degit hygraph/hygraph-examples/uix-bynder-input uix-bynder-input ``` -------------------------------- ### Install and Run Nuxt.js Project (yarn) Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs/README.md Install dependencies and run the Nuxt.js development server using yarn. ```bash cd with-nuxtjs yarn yarn dev ``` -------------------------------- ### Install and Run Nuxt.js Project (npm) Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs/README.md Install dependencies and run the Nuxt.js development server using npm. ```bash cd with-nuxtjs npm install npm run dev ``` -------------------------------- ### Install Dependencies and Run with npm Source: https://github.com/hygraph/hygraph-examples/blob/master/using-asset-upload/README.md Install project dependencies using npm and run the asset import script with a JSON file. ```bash cd using-asset-upload npm install npm run start assets.json ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-react-query/README.md Use degit to download the Hygraph React Query example project. After downloading, install dependencies and run the development server. ```bash npx degit hygraph/hygraph-examples/with-react-query with-react-query ``` ```bash cd with-react-query npm install npm run dev ``` ```bash cd with-react-query yarn yarn dev ``` -------------------------------- ### Clone Hygraph Go Example Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-golang/README.md Clone the example project using degit. This command downloads the project files to your local machine. ```bash npx degit hygraph/hygraph-examples/with-golang with-golang ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/using-pagination/README.md Use npx to download the project manually. Then, install dependencies and run the development server. ```bash npx degit hygraph/hygraph-examples/using-pagination using-pagination cd using-pagination npm install npm run dev ``` ```bash cd using-pagination yarn yarn dev ``` -------------------------------- ### Start NuxtJS Development Server Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs-graphql/README.md Run this command to start the local development server for your NuxtJS application. ```bash yarn dev ``` -------------------------------- ### Install Dependencies and Run with yarn Source: https://github.com/hygraph/hygraph-examples/blob/master/using-asset-upload/README.md Install project dependencies using yarn and run the asset import script with a JSON file. ```bash cd using-asset-upload yarn yarn start assets.json ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/using-mutations/README.md Use this command to download the project manually. Navigate into the project directory and install dependencies. ```bash npx degit hygraph/hygraph-examples/using-mutations using-mutations cd using-mutations npm install npm run dev ``` ```bash cd using-mutations yarn yarn dev ``` -------------------------------- ### Download Hygraph Gatsby Example Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-gatsby/README.md Use degit to clone the Hygraph Gatsby example project to your local machine. ```bash npx degit hygraph/hygraph-examples/with-gatsby with-gatsby ``` -------------------------------- ### Hygraph Product Data Example Source: https://github.com/hygraph/hygraph-examples/blob/master/with-graphql-mesh/README.md Example JSON response for a query fetching product details, including name, price, localizations, and image URL. ```json { "data": { "products": [ { "id": "ck8snb68g015q01582eneqegi", "name": "Long Sleeve Tee 2", "price": 1900, "localizations": [ { "price": 1900, "locale": "en" }, { "price": 1900, "locale": "de" } ], "image": { "url": "https://media.graphassets.com/1bKpf5ihQpyEeRWXn8cg" } }, { "id": "ck8snbwgw015n015710srq03g", "name": "Short Sleeve Tee", "price": 1900, "localizations": [ { "price": 1900, "locale": "en" } ], "image": { "url": "https://media.graphassets.com/hmQEPi4NR4ygnMGvRmFB" } }, { "id": "ckckfm4io04460165s8q38b4h", "name": "Cap", "price": 200, "localizations": [ { "price": 200, "locale": "en" } ], "image": { "url": "https://media.graphassets.com/DhwyUSxTTA6q9GjXBLsa" } } ], "cart": { "id": "my-unique-cart-id", "totalItems": 0, "totalUniqueItems": 0, "isEmpty": true, "abandoned": false, "subTotal": { "amount": 0, "currency": { "code": "USD", "symbol": "$" }, "formatted": "$0.00" } }, "launchesPast": [ { "mission_name": "Starlink-15 (v1.0)", "launch_date_local": "2020-10-24T11:31:00-04:00", "launch_site": { "site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "Sentinel-6 Michael Freilich", "launch_date_local": "2020-11-21T09:17:00-08:00", "launch_site": { "site_name_long": "Vandenberg Air Force Base Space Launch Complex 4E" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "Crew-1", "launch_date_local": "2020-11-15T19:27:00-05:00", "launch_site": { "site_name_long": "Kennedy Space Center Historic Launch Complex 39A" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "GPS III SV04 (Sacagawea)", "launch_date_local": "2020-11-05T18:24:00-05:00", "launch_site": { "site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "Starlink-14 (v1.0)", "launch_date_local": "2020-10-24T11:31:00-04:00", "launch_site": { "site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "Starlink-13 (v1.0)", "launch_date_local": "2020-10-18T08:25:00-04:00", "launch_site": { "site_name_long": "Kennedy Space Center Historic Launch Complex 39A" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "Starlink-12 (v1.0)", "launch_date_local": "2020-10-06T07:29:00-04:00", "launch_site": { "site_name_long": "Kennedy Space Center Historic Launch Complex 39A" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "Starlink-11 (v1.0)", "launch_date_local": "2020-09-03T08:46:00-04:00", "launch_site": { "site_name_long": "Kennedy Space Center Historic Launch Complex 39A" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "SAOCOM 1B, GNOMES-1, Tyvak-0172", "launch_date_local": "2020-08-30T19:18:00-04:00", "launch_site": { "site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40" }, "rocket": { "rocket_name": "Falcon 9" } }, { "mission_name": "Starlink-10 (v1.0) & SkySat 19-21", "launch_date_local": "2020-08-18T10:31:00-04:00", "launch_site": { "site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40" }, "rocket": { "rocket_name": "Falcon 9" } } ] } } ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-kitql/README.md Use this command to download the project template manually. Navigate into the directory and install dependencies to run the development server. ```bash npx degit hygraph/hygraph-examples/with-kitql with-kitql ``` ```bash cd with-kitql yarn yarn dev ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/using-order-by-filter/README.md Use `degit` to download the project manually. Install dependencies and run the development server. ```bash npx degit hygraph/hygraph-examples/using-order-by-filter using-order-by-filter cd using-order-by-filter npm install npm run dev # or cd using-order-by-filter yarn yarn dev ``` -------------------------------- ### Environment Variables Setup Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nextauth-credentials/README.md Configure your Hygraph endpoint, token, NextAuth URL, and secret in the .env file for local development. ```dosini HYGRAPH_ENDPOINT= HYGRAPH_TOKEN= NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somethingsupersecret ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nextauth-credentials/README.md Use degit to clone the Hygraph with NextAuth.js example project to your local machine. ```bash npx degit hygraph/hygraph-examples/with-nextauth-credentials with-nextauth-credentials ``` -------------------------------- ### Download Project Template Source: https://github.com/hygraph/hygraph-examples/blob/master/with-apollo-client-3/README.md Use degit to download the project template manually. This command fetches the specified Hygraph example project. ```bash npx degit hygraph/hygraph-examples/with-apollo-client-3 with-apollo-client-3 ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-urql-core/README.md Use degit to download the project template manually. Then, install dependencies and run the development server. ```bash npx degit hygraph/hygraph-examples/with-urql-core with-urql-core ``` ```bash cd with-urql-core npm install npm run dev ``` ```bash cd with-urql-core yarn yarn dev ``` -------------------------------- ### Example GraphQL Query Source: https://github.com/hygraph/hygraph-examples/blob/master/with-graphql-mesh/README.md Fetch products from Hygraph, cart details from CartQL, and SpaceX launches in a single GraphQL request. ```graphql { products { id name price localizations(includeCurrent: true) { price locale } image { url } } cart(id: "my-unique-cart-id") { id totalItems totalUniqueItems isEmpty abandoned subTotal { amount currency { code symbol } formatted } } launchesPast(limit: 10) { mission_name launch_date_local launch_site { site_name_long } rocket { rocket_name } } } ``` -------------------------------- ### Run Local Python HTTP Server Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-bynder-input/README.md Start a simple local HTTP server using Python to serve your project files. This is useful for local development and testing. ```bash python -m SimpleHTTPServer 8000 ``` -------------------------------- ### Download Project Manually with Degit Source: https://github.com/hygraph/hygraph-examples/blob/master/with-astro/README.md Use degit to quickly scaffold the project locally. Navigate into the project directory and install dependencies before running the development server. ```bash npx degit hygraph/hygraph-examples/with-astro with-astro ``` ```bash cd with-astro npm install npm run dev ``` -------------------------------- ### Gatsby File System Route API with gatsby-source-graphcms Source: https://github.com/hygraph/hygraph-examples/blob/master/README.md This example demonstrates using `gatsby-source-graphcms` with Gatsby's File System Route API to dynamically create product pages. It allows for flexible page generation based on Hygraph content. ```javascript // gatsby-config.js module.exports = { plugins: [ { resolve: 'gatsby-source-graphcms', options: { endpoint: process.env.HYGRAPH_ENDPOINT, token: process.env.HYGRAPH_TOKEN, // Enable File System Route API useGatsbyNodeCreatePage: true, }, }, // other plugins ], }; // Example page template (src/templates/product.js) import React from 'react'; import { graphql } from 'gatsby'; const ProductTemplate = ({ data }) => { const { graphCmsProduct } = data; return (

{graphCmsProduct.name}

${graphCmsProduct.price}

{/* Render other product details */}
); }; export const query = graphql` query GetProductBySlug($slug: String!) { graphCmsProduct(slug: { eq: $slug }) { id name price slug # other fields } } `; export default ProductTemplate; ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-vuejs/README.md Use degit to download the project template manually. This command fetches the 'with-vuejs' template from the Hygraph examples repository. ```bash npx degit hygraph/hygraph-examples/with-vuejs with-vuejs ``` -------------------------------- ### Environment Variables for Hygraph Source: https://github.com/hygraph/hygraph-examples/blob/master/README.md Configure your local Hygraph project by adding your endpoint and token to the .env file. Examples querying data will hardcode the endpoint. ```dosini HYGRAPH_ENDPOINT= HYGRAPH_TOKEN= ``` -------------------------------- ### Create .env File Source: https://github.com/hygraph/hygraph-examples/blob/master/using-management-sdk/README.md Copy the sample .env file and provide your Hygraph migration token and endpoint. ```bash cp .env.sample .env ``` -------------------------------- ### Download Project with Degit Source: https://github.com/hygraph/hygraph-examples/blob/master/with-gatsby-image/README.md Use this command to quickly scaffold the project by downloading the template files. ```bash npx degit hygraph/hygraph-examples/with-gatsby-image with-gatsby-image ``` -------------------------------- ### Download UI Extension Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-basic-input/README.md Use npx degit to download the basic input UI extension project files. ```bash npx degit hygraph/hygraph-examples/uix-basic-input uix-basic-input ``` -------------------------------- ### Download Project with degit Source: https://github.com/hygraph/hygraph-examples/blob/master/with-swr/README.md Use degit to quickly scaffold the project locally. This command downloads the 'with-swr' template from the hygraph-examples repository. ```bash npx degit hygraph/hygraph-examples/with-swr with-swr ``` -------------------------------- ### Using @graphcms/react-image with Gatsby Source: https://github.com/hygraph/hygraph-examples/blob/master/README.md This example demonstrates how to use the `@graphcms/react-image` component with Gatsby to display Hygraph assets. It provides a convenient way to handle image rendering. ```javascript import React from 'react'; import { HygraphImage } from '@graphcms/react-image'; import { graphql } from 'gatsby'; const HygraphAssetDisplay = ({ asset }) => { return (
); }; export const query = graphql` fragment HygraphAssetFragment on GraphCMS_Asset { url altText width height } `; export default HygraphAssetDisplay; ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-algolia/README.md Use npx degit to download the project template. This command fetches the specified repository and directory. ```bash npx degit hygraph/hygraph-examples/with-algolia with-algolia ``` -------------------------------- ### Express App with EJS and awesome-graphql-client Source: https://github.com/hygraph/hygraph-examples/blob/master/README.md A basic Express.js application that uses EJS for templating and `awesome-graphql-client` to interact with Hygraph. This provides a simple backend setup for data retrieval. ```javascript const express = require('express'); const { GraphQLClient, gql } = require('awesome-graphql-client'); const app = express(); const port = 3000; const hygraphEndpoint = process.env.HYGRAPH_ENDPOINT; const client = new GraphQLClient(hygraphEndpoint); const GET_ITEMS = gql` query { items { id name } } `; app.set('view engine', 'ejs'); app.get('/', async (req, res) => { try { const data = await client.request(GET_ITEMS); res.render('index', { items: data.items }); } catch (error) { console.error('Error fetching items:', error); res.render('index', { items: [], error: 'Failed to load items' }); } }); app.listen(port, () => { console.log(`App listening at http://localhost:${port}`); }); ``` -------------------------------- ### Integrate Hygraph Schema with Apollo Server Source: https://github.com/hygraph/hygraph-examples/blob/master/README.md This example shows how to pull a Hygraph schema into an existing Apollo Server using `apollo-datasource-graphql`. This allows you to combine Hygraph data with other data sources. ```javascript import { ApolloServer } from 'apollo-server'; import { GraphQLDataSource } from 'apollo-datasource-graphql'; const hygraphEndpoint = process.env.HYGRAPH_ENDPOINT; const hygraphToken = process.env.HYGRAPH_TOKEN; const server = new ApolloServer({ schema: buildSubgraphSchema({ typeDefs: gql` type Query { products: [Product] } type Product { id: ID! name: String! price: Float! } `, resolvers: { Query: { products: () => "", // Placeholder, actual data fetching done by datasource }, Product: { __resolveReference: (reference) => { // Logic to fetch a single product by ID from Hygraph return hygraphDataSource.get(`products/${reference.id}`); }, }, }, }), dataSources: () => { return { hygraphDataSource: new GraphQLDataSource(hygraphEndpoint, { headers: { authorization: `Bearer ${hygraphToken}`, }, }), }; }, }); server.listen().then(({ url }) => { console.log(`🚀 Server ready at ${url}`); }); ``` -------------------------------- ### Sync Content to Algolia with Next.js API Routes Source: https://github.com/hygraph/hygraph-examples/blob/master/README.md This example shows how to synchronize Hygraph content to Algolia using webhooks on publish. It leverages Next.js API routes for handling the webhook events. ```javascript import algoliasearch from 'algoliasearch'; const ALGOLIA_APP_ID = process.env.ALGOLIA_APP_ID; const ALGOLIA_API_KEY = process.env.ALGOLIA_API_KEY; const ALGOLIA_INDEX_NAME = process.env.ALGOLIA_INDEX_NAME; const client = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY); const index = client.initIndex(ALGOLIA_INDEX_NAME); export default async function handler(req, res) { if (req.method === 'POST') { const { eventName, entity } = req.body; if (eventName === 'content.publish') { // Add or update the content in Algolia await index.saveObject({ objectID: entity.id, ...entity.data, }); res.status(200).json({ message: 'Content indexed successfully' }); } else if (eventName === 'content.unpublish') { // Remove the content from Algolia await index.deleteObject(entity.id); res.status(200).json({ message: 'Content removed successfully' }); } else { res.status(400).json({ message: 'Unsupported event type' }); } } else { res.setHeader('Allow', ['POST']); res.status(405).end(`Method ${req.method} Not Allowed`); } } ``` -------------------------------- ### Build NuxtJS Application for Production Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs-graphql/README.md Execute this command to build your NuxtJS application for deployment. ```bash yarn build ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/uix-cloudinary-input/README.md Use npx degit to download the project files for the Cloudinary UI extension. ```bash npx degit hygraph/hygraph-examples/uix-cloudinary-input uix-cloudinary-input ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nextjs-mdx-remote/README.md Use degit to quickly scaffold the project by downloading the template manually. ```bash npx degit hygraph/hygraph-examples/with-nextjs-mdx-remote with-nextjs-mdx-remote ``` -------------------------------- ### Download Project with Degit Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nextjs/README.md Use degit to quickly scaffold the Next.js project with Hygraph integration. ```bash npx degit hygraph/hygraph-examples/with-nextjs with-nextjs ``` -------------------------------- ### Download Project with Degit Source: https://github.com/hygraph/hygraph-examples/blob/master/with-reactjs/README.md Use degit to quickly scaffold the project locally. This command downloads the project files without the Git history. ```bash npx degit hygraph/hygraph-examples/with-reactjs with-reactjs ``` -------------------------------- ### Generate Static Nuxt.js Project (npm) Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs/README.md Generate a static version of the Nuxt.js project using npm. ```bash npm run generate ``` -------------------------------- ### Generate Static Project Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs-i18n/README.md Build a static version of the Nuxt.js project. This command generates the production-ready static files. ```bash npm run generate ``` ```bash yarn generate ``` -------------------------------- ### Download Project Manually Source: https://github.com/hygraph/hygraph-examples/blob/master/with-vanilla-javascript/README.md Use this command to download the project files manually using degit. After downloading, navigate to the directory and open the index.html file. ```bash npx degit hygraph/hygraph-examples/with-vanilla-javascript with-vanilla-javascript ``` ```bash cd with-vanilla-javascript open index.html ``` -------------------------------- ### Generate Static Nuxt.js Project (yarn) Source: https://github.com/hygraph/hygraph-examples/blob/master/with-nuxtjs/README.md Generate a static version of the Nuxt.js project using yarn. ```bash yarn generate ```