GraphQL 뮤테이션 에러: 'Variable not provided' 에러

문제 상황

그래프 큐엘을 사용해서 데이터를 불러오는데 자꾸 속성을 찾을 수 없다는 에러가 발생했다.

"Variable "$createBoardInput" of required type "CreateBoardInput!" was not provided."

 

youtubeUrl 속성 추가와 동시에 graphql에서 mutation 호출 시 사용하는 createBoardInput 객체로 변경해주었다.

그랬는데 잘 동작하던 코드가 갑자기 위와 같은 에러가 발생했다.

 

원본 query.ts

// 게시글 생성하기
export const CREATE_BOARD = gql`
  mutation createBoard($writer: String, $password: String, $title: String!, $contents: String!) {
    createBoard(createBoardInput: { writer: $writer, password: $password, title: $title, contents: $contents }) {
      _id
      writer
      title
      contents
      likeCount
      dislikeCount
    }
  }
`;

 

원본 hook.ts

if (isVaild && owner && password && title && content) {
    const result = await createBoard({
      variables: {
        writer: owner,
        password: password,
        title: title,
        contents: content,
      },
     }
);

 

여러가지 방법을 찾아보고, graphiql도 들어가서 테스트해 본 결과 아래와 같이 바꾸니 정상적으로 동작했다.

 

변경한 query.ts

// 게시글 생성하기
export const CREATE_BOARD = gql`
  mutation createBoard($createBoardInput: CreateBoardInput!) {
    createBoard(createBoardInput: $createBoardInput) {
      _id
      writer
      title
      contents
      youtubeUrl
      likeCount
      dislikeCount
      createdAt
    }
  }
`;

 

변경한 hook.ts

if (isVaild && writer && password && title && content) {
    const result = await createBoard({
      variables: {
        createBoardInput: {
          writer: writer,
          password: password,
          title: title,
          contents: content,
          youtubeUrl: youtubeUrl,
        },
      },
    }
);

 

예상 문제 원인

1. 그래프큐엘에 정의된 값들을 정확하게 따르지 않고 2. 객체를 넣어주는데 막상 hook에서 객체로 넣어주지 않았다는 것. 이게 문제가 된 것 같다.

 

실은 아래와 같이 작성했었는데, 지금 생각하니 코드에 대한 이해 없이 작성한 코드라는 걸 알고 조금 부끄러워졌다,

if (isVaild && writer && password && title && content) {
    const result = await createBoard({
        createBoardInput: {
            variables: {
              writer: writer,
              password: password,
              title: title,
              contents: content,
              youtubeUrl: youtubeUrl, 
            },
      	},
    }
);

여기서 변수로 감싼 영역 밖에 변수 이름이 들어간 것은 이해 부족으로 인해 발생한 문제였다...