次のJS + Graphql +タイプスクリプトの設定

19207 ワード
react graphql nextjs typescript テキストリンク
この記事はあなたの次のJSアプリのための簡単なGraphSQLのセットアップを介して歩いていきます.
このガイドでは、すでにいくつかのチュートリアルを最初に行って、これがすべてについて参照してくださいあなたが推奨されていない場合は、GraphSQLに慣れている人々を対象としています.スポイラーの警告、GraphSQLは素晴らしいです.

アプリセットアップ


この場合には2つの方法がありますcreate-next-app コマンド.
端末で次のコマンドを実行します.
npx create-next-app next-graphql-app
アプリケーションのフォルダに移動
cd next-graphql-app

スクリプトの追加


私はタイプスクリプトのフリークです、私は文字通り通常のJavaScriptを書くことができません.だから私と一緒にしてくださいとあなたのアプリケーションにTypesScriptを追加してください.ではなく、真剣に、typescript偉大な場合は、それを試してください.NextJSそれもかなり簡単になります.
最初に、tsconfig.json
touch tsconfig.json
タイプスクリプトとタイプをインストールしてください
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
*それは生きている!

アポログラフの追加


それで、私たちはすでにNextjs + typescript一部を準備しています.
このガイドではApollo Client データの取得を処理する(urql ガイド近日公開予定.
まず、アポロクライアントとGraphSQLをインストールしましょう
npm install @apollo/client graphql
クライアントを設定する前に、接続するAPIが必要です.我々はGraphSQLバックエンドを作ることができました、しかし、それはもう一つのブログです.今のところ我々は既存の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 クライアントを支柱として受け取るコンポーネント.

データの取得


我々のアプリは現在、国のAPIに接続されていない多くの起こっている.おそらく、すでに伝えられるように、実際にデータを取得する必要があります.アポロは、データの取得を支援するいくつかのフックが付属して、このチュートリアルではuseQuery フックが、アポロが提供しているすべての他のフックを探索する自由を感じる.
きれいにしましょうpages/index.tsx nextjsが付属しているデフォルトのものから.
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;
}
より良い
GraphSQLクエリは、データを取得するために使用します.
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;
  },
};
これはWebPackに負荷をかける方法です.graphql ファイル.
今、私たちはこれについてタイプスクリプトを教えなければなりません.graphql 我々がそれを言わないならば、ファイルは文句を言うつもりです.ルートフォルダ内でフォルダと呼ばれるフォルダを作成する@types , このフォルダの中にgraphql.d.ts 次のコードを追加します.
declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;

  export = Schema;
}
OK、それはそうです.さあ、Aを作ろう.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は、前の1つはもう動作していませんでした.
2.17矢印関数デフォルト
[入門] AWS Systems Managerでパッチ管理（チュートリアル）