Next.js: How to use custom server(fetch data) api inside next.js project?

[tangbc]

Hi~ I saw the offical example show fetch data is using by:

static async getInitialProps () {
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
}

That meas this fetch-data api is outside our project, but how to use custom server api inside project? I didn't find related solutions in docs, unless I'm overlooking something?

In my question case, I use nodejs module mysql, fs to get data from local database what app needs, and all the api is working well by independent test.

I have try this:

import React from 'react'
import getArticleApi from '../interfaces/api.article'

export default class extends React.Component {
     static getInitialProps ({ query }) {
         console.log(getArticleApi)
         return {}
     }
}

And thorw error:

These modules were not found:

* net in ./~/mysql/lib/Connection.js
* tls in ./~/mysql/lib/Connection.js
* fs in ./~/mysql/lib/protocol/sequences/Query.js

To install them, you can run: npm install --save net tls fs

I think the reason for this problem is probaly that the my custom nodejs server api code was not run in node(server side) correctly.

And here is my project directory structure：

├── README.md
├── components
│   ├── CommonAside.js
│   └── DocumentHead.js
├── interfaces
│   ├── api.article.js
│   ├── api.articles.js
│   ├── api.titles.js
│   ├── db.js
│   ├── db.json
│   └── test.js
├── package.json
├── pages
│   ├── article.js
│   └── index.js
├── server.js
├── static
│   └── favicon.ico
└── styles
    ├── Global.js
    └── Normalize.js

Looking forward to your answer, thank you!

[jpsc]

Since you cannot do what you are trying to do on the browser, the way to solve this issue is to create a custom route based on express or koa and point your const res = await fetch('/endpoint').

Based on the examples you need to create something like:

server.get('/endpoint', function (req, res) {
  res.send(msqlContent)
})

[tangbc]

Thank you! It works.

[pcatana]

Hey @tangbc Do you mind sharing with me how exactly you have made it work?
Am interested in making a similar custom server api with next and can't figure out how exactly.
Am total noob btw.

Thanks in advance!

[tangbc]

@pcatana here is my work: https://github.com/tangbc/blog/blob/master/server/entry.js#L63

[greggootz]

To expand on @jpsc response. isomorphic-unfetch asked for absolute URL. This is my solution:

import fetch from 'isomorphic-unfetch'

static async getInitialProps({ req }) {
    const baseUrl = req ? `${req.protocol}://${req.get('Host')}` : '';
    const res = await fetch(`${baseUrl}/api/getRosters`)
    const data = await res.json()
    return ({
      data
    })
}

[aralroca]

Since you cannot do what you are trying to do on the browser, the way to solve this issue is to create a custom route based on express or koa and point your const res = await fetch('/endpoint').

Based on the examples you need to create something like:

server.get('/endpoint', function (req, res) {
  res.send(msqlContent)
})

@jpsc Make sense, however, the isomorphic-fetch throw this error doing this:

Only absolute URLs are supported

How can I fix it?

[dwoodwardgb]

@aralroca , take a look at @greggootz 's answer! It shows how to dynamically construct an absolute Url for your local express server.

[dsds191919]

Hi! @greggootz

To expand on @jpsc response. isomorphic-unfetch asked for absolute URL. This is my solution:

import fetch from 'isomorphic-unfetch'

static async getInitialProps({ req }) {
    const baseUrl = req ? `${req.protocol}://${req.get('Host')}` : '';
    const res = await fetch(`${baseUrl}/api/getRosters`)
    const data = await res.json()
    return ({
      data
    })
}

So How do you test for getInitialProps this time

[musa-pro]

I can get the host from req.headers.host but req.protocol says undefined, any idea?