I ran into this issue as well. I did this at the top of quasar.conf.js. You then can access your env on the new variable. Sorry for necro just thought it might help someone.

const envFile = require('./.quasar.env.json')
const env = envFile[process.env.QENV]

my solution is simple

<q-btn v-if="userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite" />
<q-btn v-if="!userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite_border" />

I also used this for like/dislike buttons and a heart favorite button. I agree sad to see this convenience go

So what’s the difference from the quasar preFetch function and the vuejs serverPrefetch added in in 2.6.0+? It seems the vue one has access to the “this” context of the component? Was this added after quasar ssr and should quasar prefetch not be used/deprecated or is there something that it provides that the vuejs one doesn’t?

The docs don’t talk about this or why to go with one over the other. Currently it sounds like the vue one is superior as it has the additional access to the “this” context of the component. If you ever accidentally use “this” in the quasar preFetch that prop is directly saved on the server. When you refresh the page it still has the old prop, and could be dangerous to ever do that.

I was able to figure this out, with the help of the vue-apollo docs. You can set a rendered function on your ssrContext that quasar provides. I was confused by what the docs meant by context. With this you can remove the entire prefetch from the component.

Updating files incase someone else gets stuck on this like I did.

Updated apollo boot file

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import fetch from 'node-fetch'
import { createHttpLink } from 'apollo-link-http'

const createApolloClient = function (isServerSide) {
  const httpLink = createHttpLink({ uri: process.env.API_URL, fetch: fetch })
  const cache = new InMemoryCache()

  if (!isServerSide) {
    const state = window.__APOLLO_STATE__

    if (state) {
      cache.restore(state)
    }
  }

  const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
    connectToDevTools: true,
    ...(isServerSide ? { ssrMode: true } : { ssrForceFetchDelay: 100 })
  })

  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    errorHandler ({ graphQLErrors, networkError }) {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          )
        )
      }
      if (networkError) {
        console.log(`[Network error]: ${networkError}`)
      }
    }
  })

  return apolloProvider
}

export default ({ app, Vue, ssrContext }) => {
  const apolloProvider = createApolloClient(!!ssrContext)

  Vue.use(VueApollo)
  app.provide = ({ $apolloProvider: apolloProvider })

  if (ssrContext) {
    ssrContext.rendered = () => {
      ssrContext.apolloState = JSON.stringify(apolloProvider.defaultClient.extract())
    }
  }
}

listItems component

<template>
  <div class="col">
    <ul>
      <li v-for="item in listItems" :key="item.id">
        <router-link :to="{ name: 'anotherPage', params: { name: item.name } }">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import GET_LIST_ITEMS from '@graphql/queries/listItems.gql'

export default {
  apollo: {
    listItems: {
      query: GET_LIST_ITEMS,
      variables: {
        where: {}
      }
    }
  }
}
</script>

Hi all,

I’ve been tinkering around trying to learn ssr/apollo client better and was wondering if there is a better solution then what I have. Is there a cleaner way to hydrate the front end client without the use a vuex? I’m also using vueApollo and it says that it attempts to do prefetch automatically but I’m not sure how I would set the APOLLO_STATE.

Dev mode… ssr + pwa
Pkg quasar… v1.0.5
Pkg @quasar/app… v1.0.4

Apollo Boot File

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import fetch from 'node-fetch'
import { createHttpLink } from 'apollo-link-http'

const createApolloClient = function (ssr = false) {
  const httpLink = createHttpLink({ uri: process.env.API_URL, fetch: fetch })
  const cache = new InMemoryCache()

  if (!ssr && typeof window !== 'undefined') {
    const state = window.__APOLLO_STATE__

    if (state) {
      cache.restore(state)
    }
  }

  // Create the apollo client
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
    connectToDevTools: true,
    ...(ssr ? { ssrMode: true } : { ssrForceFetchDelay: 100 })
  })

  return apolloClient
}

export default ({ app, Vue, ssrContext }) => {
  const apolloClient = createApolloClient(!!ssrContext)

  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    errorHandler ({ graphQLErrors, networkError }) {
      if (graphQLErrors) {
        graphQLErrors.map(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          )
        )
      }
      if (networkError) {
        console.log(`[Network error]: ${networkError}`)
      }
    }
  })

  Vue.use(VueApollo)
  app.provide = ({ $apolloProvider: apolloProvider })

  if (ssrContext) {
    ssrContext.apolloState = JSON.stringify(apolloProvider.defaultClient.extract())
    ssrContext.apollo = apolloProvider
  }
}

The apolloClient.extract() here always returns {} but I still need to call it here because if ssrContext.apolloState is null quasar complains when it tries to inject apolloState into index.template.html

index.template.html

<% if (htmlWebpackPlugin.options.ctx.mode.ssr) { %>
      <script>
        window.__APOLLO_STATE__ = {{{ apolloState }}};
      </script>
    <% } %>

listItems component

<template>
  <div class="col">
    <ul>
      <li v-for="item in listItems" :key="item.id">
        <router-link :to="{ name: 'anotherPage', params: { name: item.name } }">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import GET_LIST_ITEMS from '@graphql/queries/listItems.gql'

export default {
  async preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext }) {
    if (ssrContext) {
      await ssrContext.apollo.defaultClient.query({
        query: GET_LIST_ITEMS,
        variables: {
          where: {}
        }
      })

      ssrContext.apolloState = JSON.stringify(ssrContext.apollo.defaultClient.extract())
    }
  },

  apollo: {
    listItems: {
      query: GET_LIST_ITEMS,
      variables: {
        where: {}
      }
    }
  }
}
</script>

Do I have to use quasar prefetch on every component? Is there a cleaner/better way? Am I missing something? This currently works, client properly hydrated, no additional graphql requests, apollo cache is loaded without the use of vuex. I want to use apolloClient for local state management and so it would be better to not have vuex in the build.

Would love your input! Thanks!

Keep up the awesome work!

When I saw this I just assumed it was working as designed. I added the q-mt-md class for the amount of margin I wanted.

Yes when I am running a dev environment I run the back end in vscode(ctrl + f5) to debug, and I run quasar separately with quasar dev. When you build for production it will all be one application as the dotnet core serves static files from the wwwroot folder. the build.js file should handle all your build needs.

I have setup a basic template for you here https://github.com/MitchellMonaghan/DotnetCoreQuasar

This is how I have setup my projects so far. I let the vue/quasar deal with everything front end related and dotnet core manages db/api/auth etc. I don’t have any views in my dot net core application. All pages and routing is handled by vue/quasar, and api requests are made for needed data for each page.

Hope this helps