[ 14章] GraphSQL、TypeScript、およびResponseを使用したTwitterのクローンの作成

みんな.
として、私はこのTweeter challengeをやっている
Db diagram

フロントエンドの少し

フロントエンド部分では、私はRetrix + TailWindCSS +タイプスクリプトを使用します.テンプレートを見つけたので試してみましょう.私がすべてを構成するのを避ける若干の時間に勝つことができるならば..私はそれを取る^ ^.デザインのために、私が設計から始めなければならないように、devChallenges.ioのあらゆる挑戦はFigmaファイルを提供します.ありがとう
-アクションボタン
背景色:1 .重要
カラー:竜華ffffff!重要
ボーダーカラー:2 .重要
｝

東工大理

Creator of devchallenges.io, Software developer at Telia Finland
: D

npx create-react-app challenge_twitter_front --template tailwindcss-typescript

yarn start

万事うまくいくようだ.もっと必要なライブラリを加えましょう.

yarn add @apollo/client graphql recoil react-hook-form @hookform/resolvers yup react-router-dom date-fns react-icons

@アポロ/クライアントとgraphql :我々の質問/突然変異とGraphics関連のもの

のために

反跳:我々の世界的な州管理

のために

はフックフォーム@ hookform/resolvers yupを反応させます:我々のフォーム確認

のために

はルータDOMに反応します:ルータ

日付fns :私たちは、フォーマットに56579182に若干の日付を持ちます

は、アイコンを反応させます:遊びに若干のアイコンを持っていてください;

まず、いくつかのページでルータを追加しましょう.
src/appTSX

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Register from './pages/Register'

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/login">
          <Login />
        </Route>
        <Route exact path="/register">
          <Register />
        </Route>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

export default App

そして、例として、私の登録ページがあります.
src/page/registerTSX

import React from 'react'

const Register = () => {
  return <div>Register</div>
}

export default Register

登録する

認証を開始します.我々は、反応のフッカーフォームを使用して検証のためのyupを使用します.しかし、登録ページで作業する前に、私たちのアポロロイドを作成しましょう.
src/client/indexTS

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

const client = new ApolloClient({
  uri: process.env.REACT_APP_BACKEND_URL || 'http://localhost:4000',
  cache: new InMemoryCache(),
})

export default client

今のところ、ドキュメントに従ってください.いくつかのフックは、AppLoclientによって提供されるにアクセスするには、我々はApplLoProvider
src/indexTSX

import { ApolloProvider } from '@apollo/client'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import client from './client'
import './styles/index.css'

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

すべてが期待通りに動作するかどうかをテストするために、私は自分の登録ページでプレイします.
src/page/registerTS

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

const REGISTER = gql`
  mutation($input: RegisterPayload!) {
    register(input: $input) {
      token
      user {
        id
        username
        display_name
        email
        created_at
        updated_at
      }
    }
  }
`

const Register = () => {
  const [register, { loading, data, error }] = useMutation(REGISTER)

  return (
    <div>
      <button
        onClick={() => {
          register({
            variables: {
              input: {
                username: 'new',
                email: '[email protected]',
                display_name: 'New',
                password: 'password',
              },
            },
          })
        }}
      >
        Register
      </button>
      {loading && <div>Loading...</div>}
      {data && <div>{data.register.user.username}</div>}
    </div>
  )
}

export default Register

サーバを起動して試してみましょう.

いいですね.クライアントは予想通りに働きます.
私はここで停止します、そして、私は本当に次の部分でユーザー登録に関して本当に働き始めます.
チャオ＆世話をする.