GraphQL

Sanity에서

sanity에서 graphQL을 사용하려면 엄격한 스키마 지정을 해줘야 함.

예를 들어 아래와 같은 스키마가 있다고 한다면,

// schemas/blogPost.js
import {defineType} from 'sanity'

export default defineType({
  name: 'blogPost',
  title: 'Blog post',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'sponsor',
      title: 'Sponsor',
      type: 'object',
      fields: [
        {
          name: 'name',
          title: 'Name',
          type: 'string'
        },
        {
          name: 'url',
          title: 'URL',
          type: 'url'
        }
      ]
    }
  ]
})

아래처럼 바꿔줘야 graphQL로 접근이 가능하다.

// schemas/blogPost.js
import {defineType} from 'sanity'

export default defineType({
  name: 'blogPost',
  title: 'Blog post',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'sponsor',
      title: 'Sponsor',
      type: 'sponsor'
    }
  ]
})

// schemas/sponsor.js
import {defineType} from 'sanity'

export default defineType({
  name: 'sponsor',
  title: 'Sponsor',
  type: 'object',
  fields: [
    {
      name: 'name',
      title: 'Name',
      type: 'string'
    },
    {
      name: 'url',
      title: 'URL',
      type: 'url'
    }
  ]
})

배포

 

프로젝트에 CLI를 설치한다.

npm install @sanity/cli

npx sanity graphql deploy

또는 전역 설치

 

npm install -g @sanity/cli

sanity graphql deploy

 

아래와 같이 sanity.cli.ts에 graphql을 추가하면 안 되는 듯 하다.

// sanity\sanity.cli.ts

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: '900orqfu',
    dataset: 'production',
  },
  // graphql: [
  //   {
  //     playground: false,
  //     tag: 'experiment',
  //     workspace: 'staging',
  //     id: 'schema-experiment',
  //   },
  // ],
})

playground 활성화 할거냐는 질문에 yes하면 테스트할 수 있는 url주소를 알려준다.

주의 : 만약 스키마에 변경이 생긴다면 재배포해야 함.

 

쿼리

https://graphql-kr.github.io/learn/queries/

GraphQL: API를 위한 쿼리 언어

https://www.sanity.io/docs/graphql#33ec7103289a

GraphQL

예)

query {
  allUser(where: {id: {eq: "yhhnnmm"}}) {
    rooms {
      mode
      roomName
    }
  }
}

쿼리 요청

sanity 등 클라이언트 라이브러리

  const query = `
    query CheckUserNickName($nickName: String!) {
      allUser(where: { nickName: { eq: $nickName } }) {
        nickName
      }
    }
  `;

const response = await client.fetch(query, { nickName: name });

일반적인 사용

const response = await fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer 토큰'  // 필요한 경우 클라이언트 인증 토큰 추가
  },
  body: JSON.stringify({
    query: query,       // 위에서 정의한 GraphQL 쿼리
    variables: variables  // 쿼리 변수
  })
});

const data = await response.json();

쿼리에 변수가 없는 경우 variables 생략 가능

 

클라이언트 라이브러리(예: Apollo Client, Relay 등)는 쿼리의 변수를 자동으로 처리해주므로 명시적으로 처리할 필요가 없이 두번째 인자로만 넘겨주면 된다.