NextJS 및 GraphQL이 포함된 풀스택 웹 애플리케이션

ReactJS를 사용하여 프런트엔드 응용 프로그램을 개발하는 것에 대해 이야기할 때 다음과 같은 세 가지 주요 옵션을 찾을 수 있습니다.CRA: 단일 웹 응용 프로그램 구축에 전념하지만 SEO 포지셔닝에 어려움이 있습니다.Gatsby: 정적 사이트 생성에 전념하고 뛰어난 성능과 멋진 검색 엔진 최적화와 데이터 획득을 제공합니다.NextJS: 내가 보기에 이것은 현재ReactJS 웹 응용 프로그램을 작성하는 가장 좋은 방법이다. 왜냐하면 서버 사이드 렌더링을 제공하고 클라이언트, 멋진 내장 루트, 제로 설정 이념을 선택할 수 있기 때문이다. 그리고NextJS9로 인해 이 프레임워크는 API 루트를 제공한다. 이것은 매우 간단한 방식이고 우리의react 응용 프로그램에 백엔드 코드를 제공할 수 있다. 이것이 바로 우리가 본고에서 사용하는 방법이다.
본고에서 우리는 API 루트에서 실행되는 GraphQL API를 어떻게 실현하는지 배울 것이다.

기본 NextJS 응용 프로그램

앞서 언급한 바와 같이 NextJS는 제로 설정 이념에 전념하여 쉽게 설정할 수 있지만, 더욱 간단하기 위해서 우리는 터미널에서 npx create-next-app todo-app을 입력하면 사용할 수 있다.프로젝트 설정이 완료되면 cd todo-app을 실행하고 yarn dev을 입력하여 서버를 실행하고 모든 내용이 실행 중인지 확인합니다.

API 노선

차갑다NextJS 웹 응용 프로그램을 시작하고 실행했습니다.pages/api/에 graphql.js이라는 새 파일을 만들고 다음 코드를 추가합니다.

export default (req, res) => {
  res.statusCode = 200

  res.send("GRAPHQL")
}

localhost:3000/api/graphql으로 이동하면 작성된 텍스트 GRAPHQL을 볼 수 있습니다.쉬웠어이제 GraphQL을 구성합시다!

GraphQL 설정

설치

우선, 우리는 apollo-server-micro을 작성하여 yarn add apollo-server-micro이라는 의존항을 추가한다

우리 모드

다음은 GraphQL 작성 모드를 사용해야 합니다. GraphQL은 조회와 돌연변이, 데이터의 구조를 정의합니다.현재 hello이라는 검색을 원합니다. 문자열을 되돌려 줍니다.그러면 노선의 맨 위에 아래의 내용을 추가합시다.

import { ApolloServer, gql } from 'apollo-server-micro'

const schema = gql`
  type Query {
    hello: String!
  }
`;

해상도

우리는 방금 모드를 작성했지만, 현재 GraphQL은 모드 해상도가 필요합니다. 이것은 GraphQL이 데이터를 어디서 얻는지 알려 줍니다.모드 아래에서 해결 프로그램을 추가합니다.

const resolvers = {
  Query: {
    hello: (_parent, _args, _context) => "world!"
  }
}

서버

이제 모드와 해상도로 서버를 만듭니다.

const apolloServer = new ApolloServer({
  typeDefs: schema,
  resolvers,
  context: () => {
    return {}
  }
})

차갑다이 실례에서, 우리는 모든 요청과 응답을 처리하는 처리 프로그램에 접근할 수 있으며, 실제로는 NextJS를 사용하고 있기 때문에, 우리는 우리의 요청에 bodyParser이 필요하지 않도록 지정해야 한다.
마지막 export default을 삭제하고 다음 코드로 변경합니다.

const handler = apolloServer.createHandler({ path: "/api/graphql" });

export const config = {
  api: {
    bodyParser: false
  }
};

export default handler;

현재 GraphQL 서버의 기본 구성이 있습니다.우리는 왜 localhost:3000/api/graphql에 가서 우리가 지금 무엇을 가지고 있는지 보지 않습니까?

다음 프로그램을 실행하는 경우:

query {
    hello
}

우리는 해상도의 회답을 받을 것이다.

CORS 회사

프런트엔드에서 이 API를 사용하려면 다른 작업이 필요합니다. 따라서 yarn add micro-cors을 입력하여 새 패키지를 추가하고 다음을 추가합니다.

import  Cors  from  "micro-cors";  

const cors =  Cors({ 
    allowMethods:  ["POST",  "OPTIONS"]
});  

// Here is how we connect our handler with CORS.
export default cors(handler);

Knex의 Postgres를 사용한 데이터입니다.

어느 정도에, 우리의 응용 프로그램은 데이터베이스에 어떤 접근을 해야만 일부 데이터를 오래 저장할 수 있다.그러기 위해서는 뭔가를 설치해야 합니다. 시작합시다!우선 Knex와 Postgres를 yarn add knex pg으로 추가합시다
데이터베이스 구성을 사용하여 knexfile.js이라는 파일을 만듭니다.

module.exports = {
  development: {
    client: "postgresql",
    connection: "postgres://postgres@localhost:5432/todo",
    migrations: {
      tableName: "knex_migrations"
    }
  },
};

다음은 첫 번째 마이그레이션을 만듭니다. Postgres에서 테이블을 만드는 방법을 알려 줍니다.먼저, yarn run knex migrate:make create_todo을 입력하면 폴더 migrations에서 새 파일을 생성하여 열고 테이블을 만드는 방법을 추가합니다.

exports.up = function(knex) {
  return knex.schema.createTable("todos", function(table) {
    table.increments("id");
    table.string("description", 255).notNullable();
    table.boolean("done").defaultTo(false).notNullable();
  });
};

exports.down = function(knex) {
  return knex.schema.dropTable("todos");
};

yarn run knex migrate:up을 실행함으로써 표를 구축합시다
코드에서 데이터베이스를 관리하는 데 도움을 줄 상수를 만들어야 합니다./pages/api/graphql.js을 열고 다음을 추가합니다.

import knex from "knex";

const db = knex({
  client: "pg",
  connection: "postgres://postgres@localhost:5432/todo"
});

우리 모드 업데이트

왜 우리는 패턴과 해상도를 바꾸지 않습니까?

const schema = gql`
  type Query {
    todos: [Todo]!
    todo(id: ID!): Todo
  }

  type Todo {
    id: ID!
    description: String!
    done: Boolean!
  }
`;

const resolvers = {
  Query: {
    todos: (_parent, _args, _context) => {
      return db
        .select("*")
        .from("todos")
        .orderBy("id")
    },
    todo: (_parent, { id }, _context) => {
      return db
        .select("*")
        .from("todos")
        .where({ id })
        .first()
    }
  }
}

만약 우리가 지금 localhost:3000/api/graphql으로 돌아간다면, 우리는 최종적으로 우리의 데이터를 얻고 사용할 수 있을 것이다!

하지만, 잠깐만!우리는 어떻게 데이터를 만들 것입니까?좋아요.Mutation을 추가하는 방법을 보여 드리겠습니다. 이것은 데이터베이스에서 데이터를 만드는 데 도움을 줄 것입니다!

데이터 생성

우선, 우리는 모델에 새로운 유형을 추가해야 한다.우리는 우선 돌연변이의 이름을 지정해야 한다. 이 예에서 createTodo이고, 괄호 안에서 우리가 받아들일 값의 이름과 유형을 지정해야 한다.마지막으로, 우리는 우리의 돌변이 무엇을 되돌릴지 지정해야 한다. 이런 상황에서 Todo 유형:

const schema = gql`
  ...

  type Mutation {
    createTodo(description: String!, done: Boolean): Todo
    completeTodo(id: ID!): Todo
  }
`;

현재 resolvers 객체에 새로운 Mutation 키 및 createTodo을 추가합니다.

const resolvers = {
  ...

  Mutation: {
    createTodo: async (_, { description, done }, _c) => {
      return (await db("todos").insert({ description, done }).returning("*"))[0]
    },
    completeTodo: async (_, { id }, _c) => {
      return (await db("todos").select("*").where({ id }).update({ done: true }).returning("*"))[0];
    }
  }
}

이제 데이터베이스에서 TODO를 만들고 완성할 수 있습니다.


멋있는데 앞머리는요?

고객

지금까지 우리는 API 루트에 GraphQL을 통합하여 응용 프로그램의 서버 쪽을 구축해 왔다. 왜 응용 프로그램의 클라이언트를 통합하지 않습니까?

의존항

GraphQL에 연결할 두 개의 종속성을 추가합니다.yarn add @apollo/react-hooks apollo-boost

공급업체

우선 응용 프로그램의 Apollo 클라이언트를 설정합니다.이를 위해 pages/_app.js을 열고 다음을 추가합니다.

import '../styles/globals.css'
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient, { gql } from 'apollo-boost';


function MyApp({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: "http://localhost:3000/api/graphql"
  })

  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default MyApp

조회

이제 pages/index.js을 열고 필요한 내용을 가져옵니다.

import React, { useState } from 'react';
import { useQuery, useMutation } from "@apollo/react-hooks";
import { gql } from 'apollo-boost';

우선 GraphQL 플랫폼에서처럼 GraphQL 쿼리를 선언해야 합니다.

const GET_TODOS = gql`
  query {
    todos {
      id
      description
      done
    }
  }
`

현재, 우리 구성 요소에서, 우리는 조회와 맵을 사용하여 응용 프로그램에서 그것들을 렌더링할 것이다

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

  if(loading) return <p>Loading...</p>
  if(error) return <p>ERROR :(</p>

  return (
    <div>
      <h1>My TODO list</h1>

      {
        data.todos.map((todo) => (
          <div key={todo.id}>
            {todo.description}
            <button
              disabled={todo.done}
            >
              {todo.done ? "Done" : "Complete"}
            </button>
          </div>
        ))
      }

    </div>
  )
}

지금 우리는 브라우저에서 우리의 대기 사항을 보아야 한다.TODO를 만드는 방법을 추가합니다.
먼저 createTodo 돌연변이를 추가합니다.

const CREATE_TODO = gql`
  mutation CreateTodo($description: String!) {
    createTodo(description: $description) {
      id
      description
      done
    }
  }
`

현재, 우리의 구성 요소에서, 우리는 상태 관리, 우리의 변이와 실행 변이의 표를 추가했다.파일은 다음과 같이 표시됩니다.

export default function Home() {
  ...
  const [todo, setTodo] = useState("");
  const [createTodo] = useMutation(CREATE_TODO);

  const saveTodo = async (e) => {
    e.preventDefault();
    await createTodo({variables: { description: todo }});
    refetch();
    setTodo("")
  }

  ...

  return (
    <div>
      <h1>My TODO list</h1>

      <form onSubmit={saveTodo}>
        <label>
          New todo
          <input onChange={e => setTodo(e.target.value)} value={todo} />
        </label>
        <button type="submit">Save</button>
      </form>

      ...

    </div>
  )
}

대기사항 완료

아주 간단해!왜 우리는 completeTodo의 변이를 추가하지 않고 단추에 기능을 추가합니까?
이것은 우리의 돌연변이 성명이다.

const COMPLETE_TODO = gql`
  mutation CompleteTodo($id: ID!) {
    completeTodo(id: $id) {
      id
    }
  }
`

우리의 구성 요소 중에는 다음과 같은 것들이 있다.

export default function Home() {
  const [todo, setTodo] = useState("");
  const { loading, error, data, refetch } = useQuery(GET_TODOS);
  const [createTodo] = useMutation(CREATE_TODO);
  const [completeTodo] = useMutation(COMPLETE_TODO)

  const saveTodo = async (e) => {
    e.preventDefault();
    await createTodo({variables: { description: todo }});
    refetch();
    setTodo("")
  }

  const onComplete = async (id) => {
    await completeTodo({variables: { id }});
    refetch();
  }


  if(loading) return <p>Loading...</p>
  if(error) return <p>ERROR :(</p>

  return (
    <div>
      <h1>My TODO list</h1>

      <form onSubmit={saveTodo}>
        <label>
          New todo
          <input onChange={e => setTodo(e.target.value)} value={todo} />
        </label>
        <button type="submit">Save</button>
      </form>

      {
        data.todos.map((todo) => (
          <div key={todo.id}>
            {todo.description}
            <button
              disabled={todo.done}
              onClick={() => onComplete(todo.id)}
            >
              {todo.done ? "Done" : "Complete"}
            </button>
          </div>
        ))
      }

    </div>
  )
}

그리고 만약 지금 우리가 브라우저에 들어간다면, 우리는 우리의 응용 프로그램이 실행 중인 것을 볼 수 있습니다!

결론

GraphQL은 지난 몇 년 동안 끊임없이 발전해 온 기술이며, NextJS도 마찬가지다.이제 NextJS 응용 프로그램에서 API 루트를 사용할 수 있습니다. 이 루트를 하나로 통합하여 거대한 돌처럼 실행할 수 있는 유쾌한 창고를 구축할 수 있습니다. 누가 알겠습니까? 심지어 서버 없는 구조에서도 실행할 수 있습니다.🤔.
읽어주셔서 감사합니다!