CODEWITHSUNDEEP
vue.jsvuejs2axiosnuxt.js
itsliamoco
itsliamoco

Reputation: 1048

Nuxt serverMiddleware get json from API

Instead of getting redirects from 301.json I want to make a request to my api which returns my json.

I am using the @nuxtjs/axios module.

const redirects = require('../301.json');

export default function (req, res, next) {

    const redirect = redirects.find(r => r.from === req.url);

    if (redirect) {
        console.log('redirect: ${redirect.from} => ${redirect.to}');
        res.writeHead(301, { Location: redirect.to });
        res.end();
    } else {
        next();
    }
}

Upvotes: 3

Views: 4301

Answers (2)

SheepReaper
SheepReaper

Reputation: 468

Original answer

To build on @Dominooch's answer, if you want to return just JSON, you can use the .json() helper. It automatically sets the content-type to application/json and stringify's an object you pass it.

edit:

To clarify what we're doing here, we're replacing your 301.json entirely and using nuxt's way of creating middleware to:

  1. define a generic handler that you can reuse for any route
  2. defining explicitly which paths will use your handler (what I'm assuming you're 301.json is doing)

If 301.json is really just an array of paths that you want to redirect, then you can just use .map() but i'd personally not, because it's not immediately clear which paths are getting redirected (see my last sample) That said, the very last thing I would avoid is making a global middleware (fires for every request) that checks to see if the path is included in your array. <- Will make route handling longer for each item in the array. Using .map() will make nuxt do the route matching for you (which it already does anyways) instead of sending every request through your handler.

// some-api-endpoint.js
import axios from 'axios'

export default {
    path: '/endpoint'
    handler: async (req, res) => {
        const { data } = await axios.get('some-request')
        res.json(data)
    }
}

Then in your nuxt.config.js:

// nuxt.config.js

module.exports = {
    // some other exported properties ...
    serverMiddleware: [
        { path: '/endpoint', handler: '~/path/to/some-api-endpoint.js' },
    ]
}

If 301.json is really just an array of paths:

// nuxt.config.js

const routes = require('../301.json');

module.exports = {
    // some other exported properties ...
    serverMiddleware: routes.map(path =>
        ({ path, handler: '~/path/to/some-api-endpoint.js' }))
}

Or if you have other middleware:

// nuxt.config.js

const routes = require('../301.json');

module.exports = {
  // some other exported properties ...
  serverMiddleware: [
    ...routes.map(path =>
      ({ path, handler: '~/path/to/some-api-endpoint.js' })),
    ... // Other middlewares
}

Upvotes: 3

Dominooch
Dominooch

Reputation: 720

Here's what I did and it seems to work:

//uri-path.js
import axios from 'axios'

export default {
  path: '/uri/path',
  async handler (req, res) {
    const { data } = await axios.get('http://127.0.0.1:8000/uri/path')
    res.setHeader('Content-Type', 'text/html')
    res.end(data)
  }
}

Upvotes: 0

Related Questions