여보게, 이것은 React, Strapi, GraphQL로 응용 프로그램을 구축하는 미니 시리즈의 두 번째 부분이다.네가 찾을 수 있는 첫 번째 부분에서, 우리는 우리의 응용 프로그램을 위해 백엔드와 전단을 준비하는 첫 번째 단계를 완성했다.
이 부분에서 블로그 글을 만들고 목록에 표시하는 방법을 소개합니다.

블로그 게시물을 Strapi에 추가

먼저 터미널에 Strapi를 저장한 디렉토리의 명령을 사용하여 Strapi 환경을 시작합니다.

$ yarn develop

관리자 사용자의 로그인 데이터를 입력할 수 있도록 Strapi 서버를 시작합니다.
현재 왼쪽 사이드바에서 http://localhost:1337/admin/ 을 선택하면 내용 유형 목록에 들어갈 수 있습니다. 따라서 Content-Types Builder 을 누르십시오.
이름 Create Content Type을 입력하고 Continue 키를 누르면 다음 단계에서 컨텐츠 유형에 대한 필드를 선택하라는 메시지가 표시됩니다.

적합한 블로그 기사의 경우 다음 필드가 필요합니다.

제목(텍스트 - 짧은 텍스트)

본문(텍스트-긴 텍스트)

레이블(텍스트 - 짧은 텍스트)

작성 날짜(날짜-날짜 시간)

괄호에서 유형을 선택하여 필드를 계속 만듭니다.추가한 후 '저장' 을 누르는 것을 잊지 마십시오.

블로그 게시물 추가

이 예에서는 Strapi 백엔드도 사용합니다.Strapi 서버가 실행되고 있는지 확인BlogPost합니다.
왼쪽 사이드바 컬렉션 유형 아래의 컬렉션 유형 섹션에서 BlogPosts를 클릭합니다.이렇게 하면 현재 블로그 게시물 목록이 열립니다. 이 단추를 누르면 새 블로그 게시물을 추가할 수 있고, 이 단추를 누르면 새 블로그 게시물을 추가할 수 있습니다.
필요한 경우 모든 필드를 채우고 저장 을 클릭한 다음 게시 를 클릭합니다.
현재, 당신이 수집 유형의 블로그 댓글을 클릭하면, 목록에서 우리의 새로운 댓글을 볼 수 있습니다.
다음에 우리는 응용 프로그램의 앞부분에 블로그 게시물 목록을 표시할 것이다.

프런트엔드에 블로그 게시물 목록 표시

프런트엔드 폴더의 첫 번째 단계를 따른다면, Strapi 백엔드에서 데이터를 가져올 준비가 되어 있습니다.http://localhost:1337 폴더에서 frontend 아래에 src라는 새 디렉터리를 만들고 queries라는 새 파일을 만듭니다.
이 파일에서 GraphQL 조회를 작성하여 Strapi에서 필요한 데이터를 가져옵니다.
프런트엔드/src/querys/blogPostsjs

import { gql } from '@apollo/client'

export const GET_BLOGPOSTS = gql`
  query {
  blogPosts {
    id
    Title
    Body
    Tags
    CreatedAt
  }
}`

네비게이션http://localhost:1337/graphql을 통해 조회를 테스트할 수 있습니다
이 검색을 호출하고 데이터로 테이블을 채우기 위해 구성 요소를 작성해야 합니다. blogPosts.js 내부에 ListBlogPosts.js프런트엔드/src/components/ListBlogPostsjs

import React from 'react'
import { GET_BLOGPOSTS } from "../queries/blogPosts"
import {useQuery} from "@apollo/client";

function ListBlogPosts() {

    const {data, error, loading} = useQuery(GET_BLOGPOSTS)

    if(loading) return 'Loading...'
    if(error) return `Oops there has been an error: ${error}`
    if(data) return console.log(data)
}

export default ListBlogPosts

우리는 그것을 사용하여 우리의 조회가 정말 유효한지 테스트할 것이다.
이 파일을 저장하려면 frontend/src/components를 사용하여 서버를 실행하고 yarn start로 이동하면 표시됩니다.이것은 다음과 같습니다.

Oops there has been an error: Error: Forbidden

괜찮아요!이것은 저희와 Strapi의 연결이 유효하다는 것을 보여 줍니다. 기본 오류 처리 프로그램은 유효합니다. 이 데이터를 읽는 것을 금지했기 때문에 이것은 Strapi의 문제입니다.
Strapi 백엔드로 돌아가서 이 문제를 복구하고 Strapi 백엔드를 열고 http://localhost:3000 에 들어가서 Settings 부분에서 Users & Permissions Plugin 를 선택하십시오.모든 체크 상자가 비활성화된 상태에서 Roles 모든 체크 상자를 선택하고 저장하는 것을 보실 수 있습니다.
현재, 리셋 BLOG-POSTS 을 하면 아무것도 보이지 않지만, 콘솔을 열면 우리가 대상을 얻은 것을 볼 수 있습니다.성공!이제 우리 인류가 이해하는 방식으로 이 점을 보여주자.select all가 있는 행을 삭제하고 이 반환을 생성합니다.
프런트엔드/src/components/ListBlogPostsjs

...
if(error) return `Oops there has been an error: ${error}`

return(
        <div>
            <h1>List of Blog Posts</h1>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Body</th>
                        <th>Tags</th>
                        <th>Created</th>
                    </tr>
                </thead>
                {data?.blogPosts && data?.blogPosts.length !== 0 ?
                    <tbody>
                    {data?.blogPosts.map(({id, Title, Body, Tags, CreatedAt}) => (
                        <tr key={id}>
                            <td>{id}</td>
                            <td>{Title}</td>
                            <td>{Body}</td>
                            <td>{Tags}</td>
                            <td>{CreatedAt}</td>
                        </tr>
                    ))}
                    </tbody> : <tbody><tr><td>No Blog Posts to show!</td></tr></tbody>}
            </table>
        </div>
)

export default ListBlogPosts

저희가 여기서 뭘 했죠?간단한 테이블을 만들고 Strapi 데이터로 채워 넣었습니다.보시다시피 물음표가 있는 http://localhost:3000 을 사용합니다. 이것은 선택할 수 있는 링크입니다. 데이터가 정상적이지 않으면 코드가 이상을 던지기를 원하지 않기 때문입니다.우선, 우리는 블로그 게시물이 있는지, 블로그 게시물이 있는지 검사한다. 우리는 이곳에서 사용한다if(data).... 우리는 블로그 게시물 그룹을 얻었기 때문에 블로그 게시물이 있으면data?.은 0이 되지 않는다.블로그 게시물이 없으면, 우리는 블로그 게시물이 표시할 수 있는 간단한 정보를 표시하고, 블로그 게시물이 있으면 맵 함수를 통해 표에 그것들을 표시합니다.
Strapi 백엔드에서 입력한 모든 데이터를 포함하는 간단한 표를 보았습니다.다음 단계에서, 우리는 이 테이블에 편집과 삭제 옵션을 추가하여, 전방 클라이언트로부터 직접 처리할 수 있도록 할 것이다.
읽어주셔서 감사합니다!