Nuxt•10mo ago

Differentiating SSR from Client side requests with Pinia...

I'm using Nuxt 3.10.3, apollo/client 3.9.6., and pinia 2.1.7. All of my pages make API requests via the CatalogStore pinia store.

4 Replies

AjilityOP•10mo ago

For example, my pages/categories/[...category_slug.vue page calls the following action in my pinia store:

    async fetchProductBySlug(params: { slug: string, set_active?: true }): Promise<NuxtProduct> {
      return await useAsyncQuery({
          query: getProductBySlugQuery,
          variables: {
            slug: `/products/${params.slug}/`,
          },
        })
        .then((rsp) => {
          const product = bigCommerceToNuxtProduct(
              rsp.data.value.site.route.node
          )
          this.addProduct(product)
          if (params.set_active) {
            this.setActiveProduct(product)
          }
          return product
        })
    },

    async fetchProductBySlug(params: { slug: string, set_active?: true }): Promise<NuxtProduct> {
      return await useAsyncQuery({
          query: getProductBySlugQuery,
          variables: {
            slug: `/products/${params.slug}/`,
          },
        })
        .then((rsp) => {
          const product = bigCommerceToNuxtProduct(
              rsp.data.value.site.route.node
          )
          this.addProduct(product)
          if (params.set_active) {
            this.setActiveProduct(product)
          }
          return product
        })
    },

In pages/categories/[...category_slug.vue I have the following:

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { isEmpty } from 'lodash'
import { useCatalogStore } from '@/pinia/CatalogStore'
import Search from '@/pages/search.vue'

const CatalogStore = useCatalogStore()
const route = useRoute()
const category: any = useState()
const categorySlug: ComputedRef<string[]> = computed(() => {
  return route.params.category_slug
})

const isLoading: Ref<boolean> = ref(true)

const setCategoryData = async() => {
  if (categorySlug.value) {
    isLoading.value = true
    category.value = await CatalogStore.fetchCategoryBySlug({
      slug: categorySlug.value.join('/')
    }).finally(() => isLoading.value = false)
  }
}

onMounted(async() => {
  if (isEmpty(category.value)) {
    await setCategoryData()
  }
})

onServerPrefetch(async() => {
  await setCategoryData()
})

watchEffect(async () => {
  await setCategoryData()
})
</script>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { isEmpty } from 'lodash'
import { useCatalogStore } from '@/pinia/CatalogStore'
import Search from '@/pages/search.vue'

const CatalogStore = useCatalogStore()
const route = useRoute()
const category: any = useState()
const categorySlug: ComputedRef<string[]> = computed(() => {
  return route.params.category_slug
})

const isLoading: Ref<boolean> = ref(true)

const setCategoryData = async() => {
  if (categorySlug.value) {
    isLoading.value = true
    category.value = await CatalogStore.fetchCategoryBySlug({
      slug: categorySlug.value.join('/')
    }).finally(() => isLoading.value = false)
  }
}

onMounted(async() => {
  if (isEmpty(category.value)) {
    await setCategoryData()
  }
})

onServerPrefetch(async() => {
  await setCategoryData()
})

watchEffect(async () => {
  await setCategoryData()
})
</script>

Note the onServerPrefetch lifecycle, and the watchEffect. They both call thru to CatalogStore.fetchProductBySlug action previously mentioned.

AjilityOP•10mo ago

I see the following error in JS console:

AjilityOP•10mo ago

Is this something I can safely ignore? If not, how can I resolve it without writing duplicate code and while still using pinia store to cache results on the front-end, as the user navigates thru pages on the SPA? I am new to SSR. The docs indicate that its not recommended, but do not indicate why...

Unknown User•10mo ago

Message Not Public

Gaming

Programming

Differentiating SSR from Client side requests with Pinia...