やあ、私はブリトニーです、そして、私は100以上のインストラクターですZTM Academy そして所有者、デザイナー、開発者bDesigned . 私によってより多くのdevのメモを見つけることができますConsole Logs .

どのようにGraphSQL更新チュートリアルパート1

目次

Frontend Setup

Into the code

index.js

Server

Frontend

GraphQL Query

Mutations

React Router

Header

TLDR:How To GraphQL 反応アポロは静かな時代遅れです.これは、更新されたフックのバージョンの一部です.

フロントエンド設定

プロジェクトの作成

yarn create react-app hackernews-react-apollo
cd hackernews-react-apollo

git originの追加

git add remote origin URL
git add .
git commit -m 'init fresh repo'
git push --set-upstream origin master

再構築アプリケーション

mkdir src/components src/styles

4 .動くApp.js コンポーネントフォルダーに移動し、インデックスを移動します.CSSとアプリ.スタイルフォルダにCSS.

インポートを更新します.

// index.js
import './styles/index.css';
import App from './components/App';

// App.js
import logo from '../logo.svg';
import '../styles/App.css';

タチヨンを加えるpublic/index.html

<!-- public/index.html under other links in head -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>

CSSを置き換えるindex.css

/* index.css */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}
input {
  max-width: 500px;
}
.gray {
  color: #828282;
}
.orange {
  background-color: #ff6600;
}
.background-gray {
  background-color: rgb(246,246,239);
}
.f11 {
  font-size: 11px;
}
.w85 {
  width: 85%;
}
.button {
  font-family: monospace;
  font-size: 10pt;
  color: black;
  background-color: buttonface;
  text-align: center;
  padding: 2px 6px 3px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  cursor: pointer;
  max-width: 250px;
}

アポロとGraphSQLパッケージの追加

yarn add @apollo/client graphql

これはセットアップのために、我々は現在、いくつかのコードを書き始める準備が整いました.

コードに

インデックス.js

1 .パッケージを追加するindex.js .

import {
  createHttpLink,
  InMemoryCache,
  ApolloClient,
  ApolloProvider,
} from "@apollo/client";

2 .アポロリエントを接続する変数を作成します.

const httpLink = createHttpLink({
  uri: 'http://localhost:4000'
})
const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

3 .アラウンドコンポーネントの変更<App /> アポロプロバイダーに.

  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')

サーバ

サーバーのバックエンドをダウンロードするコードは、チュートリアル上で正しくありませんでした.正しいバージョンを得るためにReact-Apollo Tutorial Repo . それから、サーバーフォルダをコピーして、プロジェクトのルートに貼り付けました.これにより、アプリケーションにサーバーと呼ばれるディレクトリが追加されます.内部にはデータベースに接続するためのPRISMAファイルがあり、Srcフォルダの内部にはGraphSQLサーバファイルがあります.GraphSQLサーバーがアクセスできるように、Prismaデータベースを配備する必要があります.

cd server
yarn install prisma1 global
yarn install
prisma1 deploy

アフターランニングprisma1 deploy デモサーバー+ MySQLデータベースに移動し、入力をヒットし、あなたのデータベースを作成するために最も近い場所を選択します.次に、バックエンドをローカルで実行する必要があります.サーバーディレクトリの実行中yarn start そして、それを実行しておく.ここで2つの突然変異を実行してデータベースへの接続をチェックできます.移動するhttp://localhost:4000/ そして、以下の突然変異にペーストしてください.

mutation CreatePrismaLink {
  post(
    description: "Prisma turns your database into a GraphQL API 😎",
    url: "https://www.prismagraphql.com"
  ) {
    id
  }
}

mutation CreateApolloLink {
  post(
    description: "The best GraphQL client for React",
    url: "https://www.apollographql.com/docs/react/"
  ) {
    id
  }
}

再生ボタンを押すと、それぞれの突然変異を選択します.これが働いたならば、我々はリンクが以下の質問を走らせることによって加えられると確認することができます.

{
  feed {
    links {
      id
      description
      url
    }
  }
}

2つのリンクのID、説明、URLでJSONデータを返すべきです.

フロントエンド

バックエンドが動作しているので、アプリケーションのクライアント側を実装できます.まず、リンク要素の一覧を表示します.コンポーネントディレクトリの内部に、ファイル名Link.js に次のコードを追加します.

import React from 'react'

const Link = (props) => {
  const link = props.link
  return (
    <div>
      {link.description} ({link.url})
    </div>
  )
}

export default Link

これは、小道具を渡され、それらの小道具からのリンクを表示されている反応コンポーネントです.これでリンクを一覧表示するコンポーネントを作成できます.コンポーネントディレクトリに新しいファイルを追加LinkList.js 次のコードを入れます.今のところ、我々はハードコードいくつかのデータが表示されます.

import React from 'react'
import Link from './Link'

const ListLinks = () => {
  const links = [
    {
      id: '1',
      description: 'Prisma turns your database into a GraphQL API 😎',
      url: 'https://www.prismagraphql.com',
    },
    {
      id: '2',
      description: 'The best GraphQL client',
      url: 'https://www.apollographql.com/docs/react/',
    },
  ]
  return (
    <div>
      {links.map(link => <Link key={link.id} link={link} />)}
    </div>
  )
}

export default ListLinks

現在、変化を見るために、我々は行く必要がありますApp.js コンテンツを次のように変更します.

import React from 'react';
import ListLinks from './ListLinks'
import '../styles/App.css';

function App() {
  return (
    <div className="App">
      <ListLinks />
    </div>
  );
}

export default App;

我々が走るならばyarn start ルートディレクトリから、画面に表示される2つのリンクが表示されます.

グラフィカルクエリ

次に、実際には、ハードコーディングされていない代わりに動的にリンクされたリンクのデータベースを問い合わせる必要があります.ヘッドトゥLinkList.js そして、我々はいくつかのものを変えるつもりです.

1 .新規パッケージのインポート

import gql from 'graphql-tag'
import { useQuery } from '@apollo/client'

2 .インポートの下にLinkCountクエリを追加し、ハードコーディングされたリンクを削除します.

// export to be used later and create query for links
export const LINK_QUERY = gql`
{
  feed {
    links {
      id
      url
      description
    }
  }
}
`

USequeryフックをオフにし、return文を更新します.

const ListLinks = () => {
  const { loading, error, data } = useQuery(LINK_QUERY)
  return (
    <>
    {/* IF LOADING */}
      {loading && <div>Fetching...</div>}
    {/* IF ERROR */}
      {error && <div>There was an error fetching the data.</div>}
    {/* ELSE RETURN DATA FROM QUERY */}
      {data && (
        <div>{data.feed.links.map(link =>
          <Link key={link.id} link={link} />
        )}
        </div>
      )}
    </>
  )
}

これが正しく動作するなら、我々は現在スクリーンで見られることができる異なった州を持っているページを持っていなければなりません.読み込み中に、エラーがあった場合に1、リンクのリストを返します.

突然変異

私たちのリストに新しいリンクを追加するにはCreateLink.js 次のコードが含まれます.

import React, { useState } from 'react'
import { gql, useMutation } from "@apollo/client";

const LINK_MUTATION = gql`
  mutation PostMutation($description: String!, $url: String!) {
    post(description: $description, url: $url) {
      id
      url
      description
    }
  }
`

const CreateLink = () => {
  const [description, setDescription] = useState("")
  const [url, setUrl] = useState("")

  const [createLink] = useMutation(LINK_MUTATION)

  return (
    <div>
      <div className="flex flex-column mt3">
        <input
          className="mb2"
          value={description}
          onChange={e => setDescription(e.target.value)}
          type="text"
          placeholder="A description for the link"
        />
        <input
          className="mb2"
          value={url}
          onChange={e => setUrl(e.target.value)}
          type="text"
          placeholder="The URL for the link"
        />
      </div>
      <button
        onClick={() => {
          createLink({
            variables: {
              description,
              url
            }
          })
        }}
      >
        Submit
        </button>
    </div>
  )
}

export default CreateLink

このファイルには、GQLとUSEUtationフックを使用するインポート、GraphSQLの突然変異、およびURLの更新とリンクの説明を処理するいくつかの状態が含まれます.これは、コンポーネントをApp.js 下<ListLinks /> コンポーネント.

import React from 'react';
import ListLinks from './ListLinks'
import CreateLink from './CreateLink';
import '../styles/App.css';

function App() {
  return (
    <div className="App">
      <ListLinks />
      <CreateLink />
    </div>
  );
}

export default App;

実際に更新プログラムを参照するには、ページを再生する必要がありますまたは遊び場で照会.これを避けるために、我々はページを更新するためにアプリケーションに反応ルータを加えることができます.

反応ルータ

アプリケーションのルートディレクトリにあることを確認し、次のコマンドを実行します.

yarn add react-router react-router-dom

今、我々はアプリケーションにそれを追加する必要がありますindex.js .輸入react-router-dom とラップApolloProvider ルータで.

import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <Router>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Router>,
  document.getElementById('root')
);

ヘッダー

さて、リンクを保持するヘッダーコンポーネントを作成します.コンポーネントのフォルダでHeader.js . 次のコードは、反応ルータとDOMからリンクコンポーネントをインポートし、タイトルと2つのリンクを表示します.

import React from 'react'
import { Link } from 'react-router-dom'

const Header = () => {
  return (
    <div className="flex pa3 justify-between nowrap orange">
      <div className="fw7 mr1 black">Hacker News</div>
      <div className='flex'>
        <Link to="/" className="ml1 no-underline black">
          new
          </Link>
        <div className="ml1 white">|</div>
        <Link to="/create" className="ml1 no-underline black">
          submit
          </Link>
      </div>
    </div>
  )
}

export default Header

ヘッダを見るには、App.js . 我々は、インポートする必要がありますHeader とSwitch and Route コンポーネントreact-router-dom .

// add these imports
import { Switch, Route } from 'react-router-dom'
import Header from './Header'

// update App component to the following
function App() {
  return (
    <div className="center w85">
      <Header />
      <div className="ph3 pv1 background-gray">
        <Switch>
          <Route exact path="/" component={ListLinks} />
          <Route exact path="/create" component={CreateLink} />
        </Switch>
      </div>
    </div>
  );
}

最後に、更新する必要がありますCreateLink ブラウザは、新しいリンクを送信した後、リストに戻るようにコンポーネント.

// add useHistory import and query to imports
import { LINK_QUERY } from './ListLinks'
import { useHistory } from "react-router-dom";

// initiate useHistory inside component
let history = useHistory();

// update cached links
  const updateCache = (cache, { data }) => {
    const currentLinksList = cache.readQuery({
      query: LINK_QUERY
    })
    const updatedLinksList = [...currentLinksList.feed.links, data.post]

    cache.writeQuery({
      query: LINK_QUERY,
      data: {
        feed: {
          __typename: "Feed",
          links: updatedLinksList,
          count: updatedLinksList.length
        }
      }
    })
  }

// update createLink variable
  const [createLink] = useMutation(LINK_MUTATION, {
    onCompleted: () => history.push("/"),
    onError: () => history.push("/"),
    update: updateCache
  });

現在、リンクのリストと新しいリンクは別々のページにあります.これに似たページがあるはずです.