다음 js+GraphQL+TypeScript 설정

19365 단어 reactgraphqlnextjstypescript
이 문서에서는 다음 JS 응용 프로그램에 대한 간단한 GraphQL 설정을 안내합니다.
이 안내서는 GraphQL에 익숙한 사람을 대상으로 합니다. 만약 당신이 익숙하지 않다면, 이것은 어떻게 된 일인지 먼저 교과서를 읽어 보시기 바랍니다.교란판 경보, GraphQL 좋아요.

응용 프로그램 설정


이 점을 할 수 있는 몇 가지 방법이 있습니다. 이 예에서 우리는 create-next-app 명령을 사용할 것입니다.
터미널에서 다음 명령을 실행합니다.
npx create-next-app next-graphql-app
응용 폴더로 이동
cd next-graphql-app

TypeScript 추가


나는 타자광이다. 나는 정말 더 이상 일반적인 자바스크립트를 쓸 수 없다.따라서 응용 프로그램에 TypeScript를 추가하십시오.정말이지, TypeScript는 훌륭해. 한번 해봐야지.NextJS도 그것을 매우 간단하게 만들었다.
먼저 tsconfig.json 라는 파일을 만듭니다.
touch tsconfig.json
TypeScript 및 types 설치
npm install --save-dev typescript @types/react @types/node
pages 폴더의 파일 확장자를 변경합니다.
_app.js -> _app.tsx
index.js -> index.tsx
hello.js -> hello.ts
마지막으로 애플리케이션 시작
npm run dev
살아있어

Apollo GraphQL 추가


NextJS+TypeScript 섹션이 준비되어 있습니다. GraphQL입니다.
이 안내서에서 우리는 데이터 획득을 처리하기 위해 Apollo Client 이라는 라이브러리를 사용할 것이다. urql 안내서가 곧 출시될 것이다.
우선 Apollo 클라이언트와 GraphQL을 설치합니다.
npm install @apollo/client graphql
클라이언트를 설정하기 전에 연결할 API가 필요합니다.우리는 GraphQL 백엔드를 만들 수 있지만, 이것은 다른 블로그에 사용될 것이다.현재, 우리는 기존의 countries api 을 사용하고, 당신이 그것에 있을 때 그것에게 별 하나를 줄 것이다.
API url을 통해 연결할 클라이언트를 만듭니다.pages/_app.tsx에 다음 코드를 추가합니다.
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com',
  cache: new InMemoryCache()
});
이제 ApolloProvider 클라이언트를 응용 프로그램에 연결합니다.
너pages/_app.tsx는 그럴 거야.
import type { AppProps } from 'next/app';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com',
  cache: new InMemoryCache(),
});

import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;
그래서 여기서 우리는 기본적으로 우리의 응용 프로그램을 ApolloProvider 구성 요소에 포장하고 이 구성 요소는 클라이언트를 도구로 한다.

데이터 가져오기


우리의 응용 프로그램은 현재countries API에 연결되어 있지만, 진전은 크지 않다.이미 알고 계신 바와 같이, 우리는 실제적으로 데이터를 얻어야 합니다.Apollo는 데이터를 얻을 수 있도록 갈고리를 덧붙입니다. 이 강좌에서는 useQuery 갈고리만 사용하지만, Apollo가 제공하는 모든 다른 갈고리를 자유롭게 탐색할 수 있습니다.
NextJS와 함께 제공되는 기본 컨텐츠 pages/index.tsx 를 정리합니다.
import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Countries GraphQL</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Countries</h1>
      <div>
        <h3>Countries go here</h3>
      </div>
    </div>
  );
}
사용하지 않는 스타일도 styles/Home.module.css 에서 삭제합니다.
/* This is all we need */
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
많이 좋아졌어요:)
다음과 같이 GraphQL 쿼리를 사용하여 데이터를 가져옵니다.
query {
    countries {
      code
      name
  }
}
현재, 우리는 조회를 같은 파일에 쓸 수 있지만, 나는 조회를 단독 파일에 두는 것을 매우 좋아한다.이를 위해서는 NextJS가 .graphql 파일을 읽는 방법을 알 수 있도록 조정이 필요합니다.
루트 폴더에 next.config.js 라는 파일을 만들고 다음 코드를 입력하십시오.
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });
    return config;
  },
  webpackDevMiddleware: (config) => {
    return config;
  },
};
웹 팩에 .graphql 파일을 불러오는 방법을 알려 줍니다.
지금 우리는 TypeScript 이 파일.graphql을 알려야 합니다. 만약 우리가 그것을 알려주지 않는다면, 그것은 불평할 것입니다.루트 폴더에 @types 라는 폴더를 만들고 이 폴더에 graphql.d.ts 라는 파일을 만들고 다음 코드를 추가합니다.
declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;

  export = Schema;
}
네, 그럴 거예요.현재, 우리는 .graphql 파일을 만들고, 그 중에서 조회할 것이다.
간단하게 보기 위해서, 우리는 조회 파일을 pages 폴더에 위치시키지만, 어떠한 약속도 따를 수 있습니다.앞에서 말한 바와 같이 pages 폴더에 CountriesQuery.graphql 라는 파일을 만듭니다. 코드는 다음과 같습니다.
query {
 countries {
   code
   name
 }
}
현재, 우리는 pages/index.tsx 갈고리를 사용하여 내부 조회useQuery를 호출합니다.
import Head from 'next/head';
import { useQuery } from '@apollo/client';

import QUERY_COUNTRIES from './queryCountries.graphql';

import styles from '../styles/Home.module.css';

export default function Home() {
  const { data, loading, error } = useQuery(QUERY_COUNTRIES);

  // check for errors
  if (error) {
    return <p>:( an error happened</p>;
  }

  // if all good return data
  return (
    <div className={styles.container}>
      <Head>
        <title>Countries GraphQL</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Countries</h1>
      {/* let the user know we are fetching the countries */}
      {loading && <p>loading...</p>}
      <div>
        {data.countries.map((country) => (
          <div key={country.code}>{country.name}</div>
        ))}
      </div>
    </div>
  );
}
다음과 같은 내용을 볼 수 있습니다.

그다지 유행하지는 않지만, 데이터는 거기에 있습니다. 우리는 이미 설정을 완성했습니다.
* 소스 코드를 볼 수 있습니다here*

도전하다


이제 데이터가 생겼습니다. 응용 프로그램의 스타일을 디자인하고 트위터에 결과를 알려주겠습니다.로고, 자본, 화폐 등 조회에 더 많은 필드를 추가할 수 있다는 것을 기억하십시오.
query {
 countries {
   code
   name
   capital
   emoji
   currency
  }
}
사용 가능한 모든 필드를 보려면 확인playground합니다.
당신이 이 강좌를 좋아하길 바랍니다. 만약 당신이 좋아한다면, 평론하고 공유해 주십시오. 그러면 저는 계속 더 많은 것을 할 수 있습니다.
편집: API가 변경되어 이전에는 더 이상 작동하지 않습니다.
유닉스 환경 프로그래밍 tcp 통신
Qml && Qt HTML Base64

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage