GraphQL 게시판 화면 구현

마지막으로 화면을 구현해본다.

구현

데이터는 GraphQL에서 담당하니까 컨트롤러는 화면만 전달해주면 된다.

@Controller
public class BoardController {

	@GetMapping("/")
	public String home(Model model) {
		return "index";
	}
	
}

thymeleaf를 사용했기 때문에 resources아래에 templates 폴더를 만들었다.
화면은 bootstrap을 사용했다.
제이쿼리는 ajax기능만 사용해서 빼고 다시 만들었다.

화면에서 graphql 쿼리를 날려보자.

const url = location.origin + '/graphql';
const removeId = document.getElementById('inputRemoveId').value;
const removeKey = document.getElementById('inputRemove').value;
const query = `mutation{
		removeBoard(
				boardId:${removeId},
				removeKey:"${removeKey}"
			){
				boardId
				content
				author
				updatedDate
			}
		}`;

return fetch(
		url,
		{
			method: 'POST',
			headers:{
				'Content-Type':'application/json'
			},
			body: JSON.stringify({ query })
		}
	);

document에 접근해서 값을 받아온 후에 쿼리/뮤테이션을 만들었다.

사실 프론트는 잘 몰라서 javascript로 DOM을 다 만들었다.

function reDraw(boardList){
	const parentDiv = document.getElementById("boardList");
	parentDiv.innerHTML = '';
	if(boardList == null) return;
	for(let i = 0; i < boardList.getBoardList.length; i++){
		  var newDiv = drawContent(boardList.getBoardList[i]);
		  parentDiv.append(newDiv);
	}
}

function drawContent(board){	
	var newDiv = document.createElement("div");
	newDiv.setAttribute("id","content" + board.boardId);
	newDiv.setAttribute("class","card m-2");
		
	var card = document.createElement("div");
	card.setAttribute("class","card-body jumbotron");

	var author = document.createElement("h4");	  
	author.setAttribute("class","card-title");
	
	var authorValue = document.createTextNode(board.author);
	author.appendChild(authorValue);
	  
	var date = document.createElement("small");
	date.setAttribute("class","text-muted");
	
	var dateValue = document.createTextNode(board.updatedDate);
	date.appendChild(dateValue);

	var removeButton = document.createElement("button");
	removeButton.setAttribute("id",board.boardId);	
	removeButton.setAttribute("class","btn btn-secondary btn-sm");
	removeButton.setAttribute("data-bs-toggle","modal");
	removeButton.setAttribute("data-bs-target","#removeModal");
	removeButton.setAttribute("onclick","setId(this.id)");
	
	var removeText = document.createTextNode("remove");
	removeButton.appendChild(removeText);
		  
	var content = document.createElement("p");
	var contentValue = document.createTextNode(board.content);
	content.appendChild(contentValue);
	  	  
	card.append(author);	 
	card.append(date);	 
	card.append(removeButton);	 
	card.append(content);	
	newDiv.append(card);
	
	return newDiv;
}

결과

글 저장, 조회, 삭제 모두 잘 된다.

• 조회

• 삭제

읽어주셔서 감사합니다.

자세한 코드는 github에서 볼 수 있습니다.

pond1029/GraphQL_Board

구현된 화면은 서버에 올려두었습니다.

Graphql Board