Is it possible to change between universal and spa mode based on the query string?

Currently, I am working on a Nuxt.js application set to universal mode and deployed as a static website using nuxt generate. The app is pulling data from a GraphQL API linked to a CMS, and everything is functioning properly. Whenever content is updated in the CMS, a deployment script triggers nuxt generate, and the changes reflect on the website within seconds.

The issue I'm facing is related to the live preview feature of the CMS (Craft CMS) accessible during content editing. The preview window sends a token to the app, allowing it to adjust its query based on the token value. This functionality seems to work fine in spa mode but not in universal mode. In universal mode, the query has already been executed on the server during generation of static files.

I have attempted various approaches with a serverMiddleware inspired by the example provided here. I also forked the code sandbox and tried different logics inside the serverMiddleware function, but unfortunately, no results have been achieved so far.

javascriptvue.jsnuxt.js

Answer №1

Nuxt 2.13 introduces a new feature called preview mode that can be activated using a plugin: 

export default async function ({ query, activatePreview }) => {
  if (query.preview) {
    activatePreview()
  }
}

Enabling the activatePreview() function switches the page to fetch live data from the API instead of relying on pre-generated content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...

javascripthtmlcssbootstrap-4

Organize the array object by roles using mapping and grouping techniques

Given an object array with roles as keys and values, I want to group them according to the roles assigned. Here is the sample data: { users: [ { firstName: 'Will', lastName: 'Jacob', email: '<a href="/cd ...

javascriptnode.jsarraysjson

React throws a "ReferenceError: indexedDB is not defined" but surprisingly, it still manages to function properly

I utilized yarn to install idb-keyval By utilizing the following code, I imported it: import { set } from 'idb-keyval'; Then, I assigned a value to a variable using the following code snippet: set('hello', 'world'); Althou ...

javascriptreactjsnext.js

What is the best way to create a compound query in Firebase?

I am working on a TypeScript script to search for a city based on its population... import { getFirebase } from "react-redux-firebase"; ... get fb() { return getFirebase(); } get fs() { return this.fb.firestore(); } getCollection(coll ...

javascriptreactjsfirebasegoogle-cloud-firestore

(no longer supported) We are unsure about the usage of /deep/, >>>, and ::ng-deep, ::v-deep

Since /deep/ has been deprecated, I have found that using global styles instead is the only viable solution. Does anyone know of an alternative solution where we can still maintain encapsulation or scoped styling? ...

cssangularvue.jsvuejs2deprecated

Adding rows to a Datatable using an object array in rows.add()

Attempting to refresh my current Datatable by fetching new data using an Ajax function. Despite trying various solutions from other sources, the table does not update as expected. The function being used is shown below: $.ajax({ url: "<?php echo s ...

javascriptphpjqueryajaxdatatable

What is the best way to deploy a nodejs expressjs application to a server?

I have successfully developed a nodejs and express application that works perfectly on my localhost. To start the application, I simply run the command npm start or node index.js. Recently, I uploaded all the necessary files, including node_modules, to a ...

javascriptnode.jsexpress

Is it possible to utilize the router.query feature in a function within Next.js?

Running into a problem with my Next.js page. I'm attempting to utilize the request params in a function, but it keeps coming up as undefined. I've exhausted all my troubleshooting options. I already know that there's no need to include id i ...

javascriptreactjsnext.js

The Object filter is experiencing a delay with processing 10,000 items

When an API returns over 10,000 objects in the format of {firstName:'john',lastName:'Cena'}, I am faced with a performance issue. In my parent React component, I make the API call in componentDidMount and pass this object to child compo ...

javascripttypescript

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

javascriptjqueryhtmlcssjquery-chosen

Angular 5 is throwing an error that says: "There is a TypeError and it cannot read the property 'nativeElement' because it

Being aware that I may not be the first to inquire about this issue, I find myself working on an Angular 5 application where I need to programmatically open an accordion. Everything seems to function as expected in stackblitz, but unfortunately, I am enco ...

javascriptangulartypescript

Is it possible for me to send transactions asynchronously using polkadot-js?

After thoroughly going through the official documentation, I stumbled upon a page discussing how to transfer using polkadot-js const transfer = api.tx.balances.transfer(BOB, 12345); const hash = await transfer.signAndSend(alice); I am curious if it' ...

javascriptsubstratepolkadotpolkadot-js

Is it possible to retrieve AJAX data through a callback function?

I have encountered an issue where the ajax success function does not return data as expected. I attempted to use a callback function instead, but I still end up with undefined results. I resorted to using the variable responseText, however, I am looking fo ...

javascriptjqueryajax

The Angular module instantiation failed with the error message: "[$injector:modulerr] Failed to

Struggling with setting up basic AngularJS functionality for a project, especially when trying to include angular-route. Both components are version 1.4.8. My approach involves using gulp-require to concatenate my JS files. Here is my main javascript file: ...

javascriptangularjsgulpangular-route-segment

Learn how to efficiently pre-load data using the prefetchQuery method in React-Query

Attempting to pre-fetch data using react-query with prefetchQuery. The network tab in browser DevTools shows the requested data coming from the back-end, but strangely, the data is not present in the react-query DevTools cache. Any ideas on what might be c ...

javascriptreactjsnext.jsreact-query

What is the technique for causing this element to move in reverse?

How can I utilize JS to halt the interval and direct the alien to move backwards once it reaches 700px? I am aware that CSS can achieve this, but I prefer a strictly JS approach. I am struggling with stopping the interval as it hits the left position of 70 ...

javascripthtmlcss

Transform a log file into a JSON structure

In my log file titled request.log, the following entries are present: [2022-06-30T09:56:40.146Z] ### POST https://test.csdf/auth/send_otp { "method": "POST", "headers": { "User-Agent": "testing&q ...

javascriptnode.jsnpmloggingfs

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

I am experiencing an issue where the dropdown closes after the first selection, despite setting close-on-select="false". However, it works properly after the initial select. You can observe this behavior directly on the homepage at the following link: vue ...

javascriptvue.jsvuejs2vue-multiselect

The priority of custom attributes in HTML

There seems to be some ambiguity regarding whether data- attributes should be considered primary or secondary syntax. Is there a defined standard for this in major frameworks like Angular? For example, if an attribute is specified as both my-attr and dat ...

javascripthtmldom

Establishing a connection between the socket and the currently authenticated user through socket.io

My website consists of multiple pages, and when a user logs in, I need to establish a connection between their user ID (stored in MongoDB) and the socket for real-time messaging. Currently, user details are saved in the express session variables upon login ...

javascriptnode.jsmongodbsocket.io