Nuxt.js SSR용 Apollo를 사용한 API 데이터 프리페치

Nuxt.js SSR용 Apollo를 사용한 API 데이터 프리페치

아폴로/nuxt 구성 내에서 데이터를 프리페치하는 것에 대한 매우 간단한 질문이 있습니다.

GraphQL API에서 데이터를 요청하고 있는데 서버 측 렌더링을 사용하기 위해 데이터를 프리페치하고 싶습니다.문서를 읽다 보면 단순히 설정만 하면 될 것 같아요.prefetch: true클라이언트 측에서 항상 요청을 전송하여 모든 종류의 문제를 일으킵니다.

내 컴포넌트의 코드는 다음과 같습니다.

apollo: {
  concept: {
    prefetch: true,
    query: conceptStatements,
    variables () {
      return { id: this.$route.params.id }
    }
  }
}

뭔가 관계가 있을 것 같아서this.$route.params.id평가되고 있습니까?

최종적으로 Vuex 스토어를 만들고 싶다.store/index.js모든 아폴로 쿼리를 사용하여 애플리케이션 전체에서 데이터에 액세스할 수 있도록 하지만 문서에서는 이 방법을 매우 모호합니다.어떤 도움이라도 주시면 감사하겠습니다!

데이터가 프리페치되지 않았습니까?

Prefetch는 첫 번째 렌더링용(SSR 모드)입니다.Nuxt/Apollo는 graphql api를 호출하여 페이지를 생성하여 브라우저로 전송합니다.다른 경로에서 페이지로 이동하는 경우 브라우저에서 api를 호출합니다.

devtools/network에서 이 동작을 확인할 수 있습니다.xhr을 선택합니다.페이지를 갱신합니다.xhr 콜이 없습니다.다른 경로로 이동하여 페이지를 새로 고친 다음 경로로 이동합니다. 여기서 아폴로 쿼리는 graphql api에 대한 xhr 호출이 표시됩니다.

또, 이 동작을 아폴로 설정으로 설정할 수 있습니다.fetchPolicy.

Vuex는 아폴로 쿼리의 응답을 저장할 필요가 없습니다.

vue-apollo 문서에서:

Apollo에서 GraphQL 쿼리를 실행하면 API 호출 결과가 Apollo 캐시에 저장됩니다.또한 로컬 애플리케이션 상태를 저장하여 다른 컴포넌트에서 사용할 수 있도록 해야 한다고 가정합니다.보통 Vue 어플리케이션에서는 Vuex를 사용하여 이 작업을 수행할 수 있습니다.그러나 Apollo와 Vuex가 모두 있으면 데이터를 2개의 다른 장소에 저장할 수 있기 때문에 두 가지 사실의 출처를 얻을 수 있습니다.

따라서 다른 페이지나 컴포넌트에서 동일한 쿼리를 수행할 경우 Apollo는 매번 API를 호출하지 않고 Apollo 캐시에서 데이터를 가져옵니다.아폴로는 그냥 마법이야!

언급URL : https://stackoverflow.com/questions/58825667/prefetching-api-data-with-apollo-for-nuxt-js-ssr