Support for new full static

[shidcordero]

When can we able to release a support for the new full static generation on NuxtJs? I am having an issue using apollo-module on generating the static page using smart queries.

I have this component page

export default {
  data() {
    return {
      isEmpty,
      format,
      articles: [],
      query: '',
      resultsPerPage: 5,
      currentPage: 1,
      totalRecords: 0,
      loading: 0,
      filteredArticles: []
    }
  },
  apollo: {
    articles: {
      loadingKey: 'loading',
      deep: true,
      prefetch: true,
      watchLoading(isLoading) {
        if (isLoading) {
          console.log('This should not be happening from the client!!!')
        }
      },
      query: articlesQuery,
      variables() {
        return {
          start: this.resultsPerPage * (this.currentPage - 1),
          limit: this.resultsPerPage,
          sort: 'date:DESC'
        }
      },
      result(result) {
        this.articles = result.data.articles
        this.totalRecords = result.data.articlesConnection.aggregate.count
        this.refreshData()
      }
    }
  }
}

this generates static files with no payload data, there it keeps on refetching.

[yvess]

I have the same problem. Any known workaround to fix this?

[yvess]

Found a workaround inspired by https://dev.to/astagi/how-to-build-a-jamstack-multi-language-blog-with-nuxt-js-3gah

My code looks like this, I switched to asyncData instead of the smart query, then it worked.

  async asyncData({ app, route }) {
    const { data } = await app.apolloProvider.defaultClient.query({
      query: MY_QUERY,
      variables: {
        id: app.$slugToId.getId(route.path), // custom function
        language: app.i18n.locale
      }
    })
    return {
      page: data.page
    }
  },

but It would be nice to use smart query again

[yohan-atlan]

I'm having the same issue in the components so I can't use the asyncData method. Do you have an other solution ?

[kyleoliveiro]

@yohan-atlan try nuxt fetch method instead of asyncData. Works for me.

[yohan-atlan]

It's works for me ! Thank you !

[yohan-atlan]

Update : this is not working, the response in the fetch is working when nuxt generate the site but when it's live the data object rewriting dom

[Saurou]

I have been banging my head on this for a while (until found this page and stopped, so thanks).

If you look at this video here at 16:52 (should start there) it's been said that asyncData needs to be used, as smart queries will not work until target: static is released. However as we're discovering, this doesn't seem to be true.

Also, shortly after she says that static will not expose your api to the users, but the httpEndpoint will still be visible if you inspect app.js file. Is this the normal behaviour? What does she mean exactly then?

[Saurou]

Thanks @yvess

I've been trying to use your approach, as like you I was using only smart queries but I would like to use the new Nuxt Full Static.

I don't know much about asyncData using apollo, but using your example I get the error: [Vue warn]: Property or method "page" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (I am using page as per your example, but I also tried to just return { data } .

I also tried to do return console.log(data), which I don't know if it's correct and anyway doesn't return anything.

I'd expect to have the result in my template just using {{ data }}, and I am importing my .gql file (as I was already with smart queries). Any idea of what I am missing here?

[yvess]

@Saurou 'page' is part of my data you need to change it to you data variables. When data returns nothing than you graqphql query is wrong

[Saurou]

Yes, I changed it for my queries and still using my .gql files that were working with smart queries.

in the end I have something like: <div>{{ home.title }}</div>

then in the Githubissues.

Githubissues is a development platform for aggregating issues.