Graphql-초기셋팅

apollo-client 설치

yarn add apollo-client

_app.tsx 에 apollo-client 설정

• Next.js 경우 -> _app.tsx 또는 또다른 컴포넌트로 빼서 작업해도됨
• React 경우 -> 전역에서 적용될 수 있도록 셋팅 / ex) react-router 사용

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'

export default function App () {
	const client = new ApolloClient({
		uri: "http://연결할 ApolloClient 주소",
		cache: new InMemoryCache()
	})

	return (
		<ApolloProvider client={client}>
			<Component {...pageProps}/>
		</ApolloProcider>
	)
}

graphql-codegen 설치

graphql-code-generator 홈페이지에 접속

Home – GraphQL Code Generator

Try It Now 클릭

Installation 클릭

yarn add —dev @graphql-codegen/cli

yarn add —dev @graphql-codegen/typescript
설치

codegen.yml 파일 생성

• 인덴트가 중요한 코드이므로 주의해서 작성해야함

schema: http://백엔드 graphql 주소
generates:
	./src/commons/types/generated/types.ts:
		plugins:
			- typescript
		config:
			typesPrefix: I

package.json 파일에 scripts 명령어 추가

"scripts": {
	"generate": "graphql-codegen"
}

설정 완료후 yarn generate 명령 실행