[react+GraphQL]ミニプロジェクトログ(1)

忙しいからといって、長い間疎遠になっていたGraphsqlを考え直したい.僕らは

-機能

登録

ログアウト

投稿登録

コメント

の招待状はとても良いです

そしてね.

-使用されているスキルスタックのリスト

FE : React + TypeScript

BE : GraphQL

ためらわずに、行ったログを記録してください。

1. Query

まず、apollo-serverを使用してサーバを実装します.

const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: ({ req }) => ({ req }),
})

contextではreqリクエストを受信できます.
(ex. req.headers)
typeDefs.jsファイルはapollo-serverのgqlも使用します

input RegisterInput {
    username: String!
    password: String!
    confirmPassword: String!
    email: String!
}
type User {
    id: ID!
    email: String!
    token: String!
    username: String!
    createdAt: String!
}

このようなプレイヤータイプも定義されています.

type Mutation {
    register(registerInput: RegisterInput): User!
    login(username: String!, password: String!): User!
}

REST APIに代わる変異も定義されている
(投稿に関連するQueryとMutationをスキップ)
typeを使って定義するのが最も簡潔なようですが、inputを使わなければならないのは、この2つのタイプの行為が異なることを教えてくれるためです(そうですか?)

2. Mutation

解析器を定義してmulationを詳細に定義し、正式なtypeDefsを宣言するタイプを定義します.
まずbcryptとjwtを用いて会員入金を行った.

Mutation: {
    register: async(
      _,
      { registerInput: { username, email, password, confirmPassword } }
    ) => {
    	password = await bcrypt.hash(password, 12)
		const token = jwt.sign(
        {
          id: user.id,
          email: user.email,
          username: user.username,
        },
        SECRET_KEY,
        { expiresIn: "1h" }
    )
}

ここで,突然変異()に入る変数は4種類ある.
register(parent, args, context, info)

parent:親解析器が返すオブジェクト

args:Queryで定義する変数の位置

context:contextが先に定義されている場合、このセクションでリクエストリクエストを処理できます.

info:まだ使用されていません...

3.認証ミドルウェア

既存のNodeミドルウェアのように行いますが、前述のcontextが使える時間になりました.

module.exports = (context) => {
    const authHeader = context.req.headers.authorization
    if (authHeader) {
      const token = authHeader.split("Bearer ")[1]
      if (token) {
        try {
          const user = jwt.verify(token, SECRET_KEY)
          return user
        } catch (error) {
          throw new AuthenticationError("Invalid/Expired token")
        }
      }
      throw new Error("token형식이 올바르지 않습니다.")
    }
    throw new Error("header가 존재하지 않습니다.")
}

違いはタイトルとcontextとマークされていることです.req.つまり、タイトルで取得します.それ以外は、実際にノードで実装されているコードと同じ...?やる…!
(もちろん、受信するにはサーバセクションにcontext:({req})=>({req})を作成する必要があります.)
tokenを作成すると、id、email、usernameの3つのメソッドが使用され、tokenがある場合は、これらの3つのメソッドを含むオブジェクトが返されます.そして、中衛を応用すると

createPost: async (_, { body }, context) => {
    ...
    
    const user = authMiddleware(context)
    
    ...
}

上のコードのようにcontextを定義して、それを使って終わります!
簡単ですよね?
サーバが構造のみを熟知している場合、graphqlを定義することは、既存のノードを使用する場合と何の違いもありません.クライアントからこれらのリクエストをロードまたは受信するとgraphqlの真の価値が現れる可能性があります.
reactのclient-sideを使って次の編で...