Error while creating home page with fulfillAPIRequest

[rv-nath]

Bug report

Throws up error Type Error: Cannot read property '_includeAppData' of undefined

Describe the bug

When I run npm start, after implementing /pages/api/index.js, using fulfillAPIRequest, it throws up an error on the console as follows...

event - build page: /api wait - compiling... event - compiled successfully TypeError: Cannot read property '_includeAppData' of undefined at _callee$ (/Volumes/secondary/projects/rv-app/node_modules/react-storefront/props/fulfillAPIRequest.js:50:27) at tryCatch (/Volumes/secondary/projects/rv-app/node_modules/regenerator-runtime/runtime.js:63:40) at Generator.invoke [as _invoke] (/Volumes/secondary/projects/rv-app/node_modules/regenerator-runtime/runtime.js:294:22) at Generator.next (/Volumes/secondary/projects/rv-app/node_modules/regenerator-runtime/runtime.js:119:21) at asyncGeneratorStep (/Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (/Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) at /Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7 at new Promise () at /Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12 at _fulfillAPIRequest (/Volumes/secondary/projects/rv-app/node_modules/react-storefront/props/fulfillAPIRequest.js:86:29) at fulfillAPIRequest (/Volumes/secondary/projects/rv-app/node_modules/react-storefront/props/fulfillAPIRequest.js:32:29) at Index (webpack-internal:///./pages/api/index.js:59:103) at apiResolver (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/api-utils.js:8:7) at runMicrotasks () at processTicksAndRejections (node:internal/process/task_queues:96:5) at async DevServer.handleApiRequest (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:66:462) at async Object.fn (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:58:580) at async Router.execute (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/router.js:25:67) at async DevServer.run (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:68:1042) at async DevServer.handleRequest (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:32:504) FetchError: invalid json response body at http://localhost:3000/api?_includeAppData=1 reason: Unexpected token I in JSON at position 0 at /Volumes/secondary/projects/rv-app/node_modules/node-fetch/lib/index.js:272:32 at runMicrotasks () at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Function.MyApp.getInitialProps (webpack-internal:///./pages/_app.js:123:17) at async loadGetInitialProps (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/lib/utils.js:5:91) at async renderToHTML (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/render.js:28:1537) at async /Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:112:97 at async /Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:105:142 at async DevServer.renderToHTMLWithComponents (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:137:387) at async DevServer.renderToHTML (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:138:610) at async DevServer.renderToHTML (/Volumes/secondary/projects/rv-app/node_modules/next/dist/server/next-dev-server.js:36:578) at async DevServer.render (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:75:160) at async Object.fn (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:58:672) at async Router.execute (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/router.js:25:67) at async DevServer.run (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:68:1042) at async DevServer.handleRequest (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:32:504) { type: 'invalid-json' }

On the GUI of the page i.e. localhost:3000, the following error is shown.

A clear and concise description of what the bug is.

To Reproduce

1. Change the pages/api/index.js as follows...

/*
import { home } from 'react-storefront-connector'

export default async function(req, res) {
  res.json(await home(req, res))
}
*/


import fulfillAPIRequest from 'react-storefront/props/fulfillAPIRequest'


function getAppData() {
  return Promise.resolve(
  {
  "menu": {
    "items": [{
      "text": 'Menu Item Text',           // required
      "image": '/path/to/image.png',      // optional - An image to display to the left of the text
      "header": 'html or data',           // optional - HTML or data to display in the header of the menu card for this item
      "footer": 'html or data',           // optional - HTML or data to display in the footer of the menu card for this item

      // For expandable items only
      "expanded": (undefined|true|false), // When `true` or `false`, the item will be rendered as an
                                          // expandable section.
                                          // When `undefined` the menu will slide to the next level of
                                          // the when the item is clicked.

      // For links only
      "href": `/s/[subcategoryId]`,       // optional - the Next.js route pattern
      "as": `/s/${i}`,                    // optional - the URL for the link

      // For parent items only
      "items": []                         // optional - child items to display when the user taps on
                                          // this item.  Child items have the same structure.
    }]
  }
})
}

function getPageData() {
  return Promise.resolve(
  {
  "pageData": {
    "title": "Home",              // The title for the document
    "slots": {                    // The rest of the data model is up to you.  It's common to include an number
      // entirely up to you       // of slots containing HTML from your CMS here, but not required.
    }
  }
  })
}


export default async function Index(params, req, res) {

  const result = await fulfillAPIRequest(req, {
    appData: getAppData,
    pageData: getPageData
  })
  return result
}

2. keep other things the same. Just the /pages/api/index.js is modified as above.
3. do npm start

Expected behavior

The page should show up without errors.

Screenshots

Screenshots provided above.

System information

• OS: macOs and Linux
• Browser Chrome
• Version of React Storefront: 8.17.4

Additional context

I tried this in my customized version initially. I thought, I did a mistake somewhere. Then, I recreated a new app from scratch using npm create <args...>. Even the fresh app behaves the same way.

[rv-nath]

I created a query on stackoverflow as well here: https://stackoverflow.com/questions/68827070/react-storefront-typeerror-cannot-read-property-includeappdata-of-undefined

[jcuffe]

From your SO post, the pages/api/index handler:

import fulfillApiRequest from 'react-storefront/props/fulfillAPIRequest'

function getPageData () {
  console.info("Executing 'getPageData' in /api/index.js...")
  return Promise.resolve({})
}

export default async function Index (params, req, res) {

  console.info("Executing '/pages/api/index.js' ...")
  const result = await fulfillApiRequest(req, {
    appData: () => getAppData(),
    pageData: () => getPageData()
  })
  return result
}

The Index function you're exporting has the method signature of a react-storefront-connector method (params, req, res), when it should have a signature of (req, res) to match the NextJS endpoint spec.

As a result, I think you are passing the response object to fulfillAPIRequest, and when res.query.__includeAppData is examined, the error is thrown because res.query does not exist.

Since you're not currently using params, you can probably just remove it from the method signature.

For any maintainers, I found it very odd that the connector interface takes both params and req arguments, when the params are invariably contained in req. If the connector needs access to req in every method, it could probably be responsible for parsing out its own params.

[rudracomputech]

I am also getting same error any solution?

Server Error FetchError: invalid json response body at http://localhost:3000/api/s/manometers-voorraad/manometers-toebehoren?_includeAppData=1 reason: Unexpected token I in JSON at position 0

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source file:///C:/wamp64/www/magentoreactapp/node_modules/next/node_modules/node-fetch/lib/index.js (272:32) runMicrotasks processTicksAndRejections node:internal/process/task_queues (96:5) .next\server\pages_app.js (54:16) @ async Function.module.exports../pages/_app.js.MyApp.getInitialProps

52 | 53 | if (Component.getInitialProps) {

54 | pageProps = await Component.getInitialProps(ctx) | ^ 55 | } 56 | 57 | return { pageProps } Call Stack async loadGetInitialProps file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/lib/utils.js (5:91) async renderToHTML file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/render.js (28:1537) async file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (112:97) async file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (105:142) async DevServer.renderToHTMLWithComponents file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (137:387) async DevServer.renderToHTML file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (138:1088) async DevServer.renderToHTML file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/server/next-dev-server.js (36:578) async DevServer.render file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (75:160) async Object.fn file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (58:672) async Router.execute file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/router.js (25:67) async DevServer.run file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (68:1042) async DevServer.handleRequest file:///C:/wamp64/www/magentoreactapp/node_modules/next/dist/next-server/server/next-server.js (32:504)