hygraph examples
1.0.0
hygraph를 시작하는 데 도움이되는 프로젝트의 예
이 repo의 모든 예는 동일한 hygraph 프로젝트를 사용합니다. 시작하려면 복제하십시오.
자신의 hygraph 프로젝트를 사용 하여이 저장소와 함께 로컬로 작업 할 때 .env 에 다음을 추가해야합니다.
HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN = 데이터 만 쿼리하는 예는 HYGRAPH_ENDPOINT 하드 코딩하여 로컬 또는 코드 및 코드 및 코드에서 예제를 사용하게됩니다.
hygraph 기능을 사용하는 방법을 보여주는 예.
| 특징 | 설명 |
|---|---|
| 자산 업로드 사용 | 자산 업로드 엔드 포인트를 사용하여 프로그래밍 방식으로 자산을 업로드합니다 |
| 관리 SDK 사용 (비디오) | 기본 관리 SDK 스크립트 스키마 생성. |
| 원격 필드 사용 (비디오) | 기본 관리 SDK 스크립트 원격 필드가있는 스키마를 생성하여 Stripe API에서 직접 데이터를 쿼리 할 수 있습니다. |
| 돌연변이 사용 (데모, 비디오) | Next.js 앱은 graphql-request , SWR 및 API 경로를 사용하여 Hygraph Mutations를 사용하는 방법을 보여줍니다. |
| 페이지 매김 사용 (데모, 비디오) | 다음.js 앱은 hygraph queries를 graphql-request 로 이끄는 방법을 보여주는 앱 |
| 풍부한 텍스트 렌더러 사용 (데모, 비디오) | @graphcms/rich-text-react-renderer 로 풍부한 텍스트를 렌더링하는 방법을 보여주는 Next.js 앱 |
| 노조 유형 사용 | UI '블록'을 구성 요소로 구성하기 위해 Union 유형을 사용하는 기본 제품 마케팅 사이트. Next.js, graphql-request 및 Tailwind CSS로 제작되었습니다 |
인기있는 응용 프로그램 프레임 워크와 함께 hygraph를 사용하는 방법을 보여주는 예.
| 프레임 워크 및 라이브러리 | 설명 |
|---|---|
| Algolia (데모, [비디오] [Video6]) | 다음에 게시 된 webhooks를 통해 Algolia에 컨텐츠를 동기화하십시오. JS API 경로. |
| 아폴로 클라이언트 3 (데모, 비디오) | Apollo Client 3을 사용하여 Hygraph의 데이터를 쿼리합니다. |
| 아폴로 서버 (데모, 비디오) | apollo-datasource-graphql 사용을 사용하여 Hygraph 스키마를 기존 Apollo 서버로 끌어 올리십시오. |
| Express (데모, 비디오) | ejs 템플릿과 awesome-graphql-client 사용하는 간단한 익스프레스 앱 |
| 개츠비 (데모) | gatsby-source-graphcms 사용하여 Hygraph의 데이터가 포함 된 제품 페이지를 작성하는 기본 Gatsby 사이트 |
| 개츠비 (파일 시스템 경로 API) (데모, 비디오) | gatsby-source-graphcms 사용하여 Gatsby의 파일 시스템 경로 API를 사용하여 제품 페이지를 작성하는 기본 Gatsby 사이트 |
| 개츠비 이미지 (데모, 비디오) | Hygraph 자산과 함께 gatsby-image 사용하는 방법 |
| [Hygraph Image] (데모, 비디오) | Gatsby와 함께 [ @graphcms/react-image ]를 사용하는 방법 |
| GraphQL CodeGen (데모) | GraphQL 코드 생성기를 사용하여 Hygraph 프로젝트를위한 26 유형을 자동으로 생성합니다. |
| 스키마 스티칭 (GraphQL 메시 포함) | Stitch 3 GraphQL API를 GraphQL 메쉬로 하나로 묶습니다 |
| GridSome (데모, 비디오) | gridsome create 사용하는 기본 예는 Cli 및 @gridsome/source-graphql 작성합니다 |
| MDX (개츠비 포함) (데모, 비디오) | Hygraph의 RichText 필드와 함께 gatsby-plugin-mdx 사용하는 방법. |
| MDX (다음 .js 포함) (데모, 비디오) | 이 예제는 hygraph의 Markdown 필드를 다음에 MDX 와 함께 사용하는 방법을 보여줍니다. |
| next.js (데모, 비디오) | 기본 Next.js 응용 프로그램, getStaticProps 및 getStaticPaths 특징이며 정적 제품 페이지를 작성합니다. |
| next.js i18n 라우팅 (데모, 비디오) | hygraph 컨텐츠와 함께 국제화 라우팅을 사용하는 방법 |
| next.js 이미지 (데모, 비디오) | hygraph 자산과 함께 다음 .js 이미지 구성 요소를 사용하는 방법 |
| Custom Loader가있는 Next.js 이미지 (데모, 비디오) | JS 이미지 구성 요소 및 hygraph 자산으로 사용자 정의 로더 기능을 사용하는 방법 |
| nuxt.js (데모, 비디오) | Tailwind 및 Axios가 추가 된 create-nuxt-app Cli를 사용하는 간단한 nuxt.js 스타터 |
| nuxt3 + nuxt-graphql-client (데모) | nuxt-graphql-client 모듈을 사용하는 간단한 nuxt.js 스타터 |
| React.js (데모, 비디오) | 이 예제는 react.js의 GraphQL-Request를 사용하여 Hygraph에서 쿼리하는 방법을 보여줍니다. |
| React Query가있는 React.js | 이 예제는 React.js의 React Query를 사용하여 Hygraph에서 쿼리하는 방법을 보여줍니다. |
| vue.js (데모, 비디오) | vue create . |
| Sveltekit (데모, 비디오) | 데이터를 가져 오기 위해 sveltekit 및 graphql-request 사용한 svelte 예제 |
| URQL이있는 Sveltekit (데모) | 데이터를 가져 오는 sveltekit 예제 URQL |
| Eleventy (데모) | 데이터를 가져 오기 위해 graphql-request 사용한 최대 예제. |
| 아스트로 (데모) | 데이터를 가져 오기 위해 graphql-request 사용하는 Astro 예제. |
| 바닐라 JS (데모) | 프레임 워크가없는 브라우저의 쿼리는 Fetch API를 사용합니다. |
| Nextauth (데모) | Nextauth.js로 인증하고 Hygraph로 계정 정보를 업데이트하십시오. |
| 후디니 (데모) | Sveltekit의 Houdini 예. |
| 스위프트 | 네이티브 스위프트 (iOS & Mac) 예제. |
스위프트 swift-graphql 로 신속하게 | Swift-GraphQL을 사용한 네이티브 스위프트 (iOS & Mac) 예제. |
우리는 당신이 시작할 수있는 몇 가지 예제 UI 확장을 만들었습니다. 이들은 자신의 사용자 정의 구성 요소로 Hygraph UI를 확장하는 방법을 보여 주어야합니다.
| 이름 | 유형 | SDK | 설명 |
|---|---|---|---|
| QuickStart | 입력 | 반응 | UI 확장을 사용하는 방법을 보여주는 기본 <input /> . |
| 구름 | 입력 | 반응 | 커스텀 클라우드 자산 선택기. |
| 초점 | 입력 | 자바 스크립트 | 커스텀 초점 포인트 피커. |
| Bynder | 입력 | 자바 스크립트 | Compact View V2 구성 요소를 사용하여 Bynder에서 자산을 찾아보십시오. |
| 조건부 필드 | 입력 | TypeScript | UI 확장자 다른 필드의 가시성을 변경하고 FieldConfig를 사용하는 방법을 보여줍니다. |
우리의 슬랙에 가입 · 문서 읽기 · hygraph에 대해 자세히 알아보기
당신이 함께 일하고있는 위에서 누락 된 것을 보십니까? 예제와 함께 풀 요청을 열고 뉴스 레터에 등장하십시오! 자세히 알아보십시오.
