Vue의 Composition API와 graphiql-code-generator의 체험이 좋아서 소개해드리고 싶습니다.

vue3 발매 후 시간이 지났습니다.Composition API는 얼마나 사용되고 있습니까?자체 신규 개발을 자주하다 보니 작은 LP를 포함해 넥스트의 프로젝트는 5개 정도다× Composition API를 사용합니다.
그중에서도 Composition API의 경험은 매우 좋았다고 생각해서 간단하게 소개합니다.

Comosition API의 이점

Composition API와 이전 Option API의 차이점을 설명할 때 다음 그림이 사용됩니다.

서술을 총결산하겠다고 했지만 총결산하면 더 쉽게 읽을 수 있을 것 같아서 그런 것도 아닌 것 같아요.웃다 웃다
반면 OptionAPI가 말한 값 데이터의reactive 대상과 컴퓨터 대상은 같은 Setup 함수에 정의되어 처음에는 읽기 어려웠다.
하지만 천천히 사용하면서 Composition API의 장점을 알게 되었습니다.
그것은 typescript의 세계와view의 세계를 분리하여 복잡한 논리를 typescript 파일로 잘라내는 것이다.
이전에vue에서 typescript를 가져오면vue-property-decorator 이런 총서를 사용해야 했다.이것도 괜찮은데, 일반적인 typescript 같은 느낌으로 형식의 은혜를 받을 수 있을까요?이렇게 말하면 좀 미묘한 느낌이 든다.
Composition API를 사용하여 vue의 optionAPI에 사용된 데이터, 컴퓨터, mount 등을 typescript 형식으로 기술할 수 있기 때문에 형식적인 은혜 외에 각 책임에 따라 모듈을 구분할 수 있고, 옵션API에서 사용하면 나열된 데이터, 컴퓨터, method를 분리할 수 있다.
※ 이미지

export default {
  data() {
    return {
       hoge: '',
       foo: ''
    }
  },
  computed: {
    hogehoge() {
    },
    hogehogehoge() {
    },
    hogehogehogehoge() {
    },
    foofoo(){
    },
    foofoofoo() {
    },
    foofoofoofooo() {
    }
  },
  methods: {
    hogeMethod_1() {
    },
    hogeMethod_2() {
    },
    hogeMethod_3() {
    },
    fooMethod_1() {
    },
    fooMethod_2() {
    },
    fooMethod_3() {
    },
    
  }

}

Composition Function의 예입니다.useXXXX 부분은 Composition Function을 활용하고 있습니다.
Comosition Functionuse은 prefix를 넣는 습관을 길렀다.

import useFoo from 'foo' #別TSファイルからimportしてこれるようになった！
import useFoge from 'hoge'

export default defineComponent({
  setup() {
     { hogehoge, hogehogehoge, hogehogehogehge, hogeMethod_1} = useHoge
     { foofoo, foofoofoo, foofoofoofoo, fooMethod_1 } = useFoo
     
     return {
       hogehoge, 
       hogehogehoge, 
       hogehogehogehge, 
       hogeMethod_1,
       foofoo,
       foofoofoo,
       foofoofoofoo,
       fooMethod_1
     }
  }
})

리액트를 접한 사람은 이런 기법이 리액트 호크스의 기법과 매우 가깝다는 것을 알아야 한다.
두 개를 터치하면 웹 전단이 어떤 방향으로 발전하는지 알 수 있다.

graphiql-code-generator의 소개

composition API에 대한 소개가 끝나면 composition API와 함께 사용하는 graphiql-code-generator를 소개합니다.
graphiql-code-generator의 장점은 graphiql의 schema에서 함수부터 유형까지 자동으로 생성할 수 있다는 것이다.
다음은 실제 화면이지만 유형에 따라 입력 보완이 가능합니다.

이런 유형의 생성 기능을 통해 서버와 프론트 데스크의 연결이 원활해졌다.이 체험 정말 좋아요!(확실)

현재 고려 사항

나는 내가 느낀composition API를 사용할 때의 주의점을 쓰고 싶다.
자신이 주로 사용하는 Nuxt에 관한 내용이 많습니다.

composition API가 지원되지 않는

나는 vue 프로젝트가 기본적으로 Nuxt를 사용한다고 생각하지만, Nuxt의 총서에는 대부분composition API에 대응하지 않는다.
예를 들어nuxt-i18n은 대응할 수 없지만 setup 함수에 대응할 수 없습니다. this.$t 와 총서의 함수라고 할 수 없습니다.
vue-i18n은 대응할 수 있기 때문에 대응해서 사용해야 합니다.

Nuxt 사용 시 SSR 동작이 의심되는 경우

Nuxt의 Composition API를 사용하는 경우 SSR이 원활하게 작동하지 않는 경우가 있습니다.
자신의 프로젝트라면 SPA와 SSG는 문제없지만 SSR은Composition API에서 문제가 있을 수 있습니다.