Common Query in NextJs XP

Bugs
1

I tried to include a query for menu-items into the common query.
My query is currently quite simple:

query($path:ID!){
  guillotine {
    getMenuItems(level: 1, currentContent: $path) {
      id
      title
      path
      isActive      
    }   
  }
}

In GraphiQL and when fetching the data clientside I get the following response:

{
  "data": {
    "guillotine": {
      "getMenuItems": [
        {
          "id": "401e72d0-6f15-4079-9d12-4f21d75e85f1",
          "title": "Articles",
          "path": "/hmdb/articles",
          "isActive": false
        },
        {
          "id": "66281d64-089a-48d2-81e1-7838d2b9b903",
          "title": "Movies",
          "path": "/hmdb/movies",
          "isActive": false
        }
      ]
    }
  }
}

When I use the query as commonquery (exchange in :_mapping) I get an serialization error:

Error returned an empty object from `getInitialProps`. This de-optimizes and prevents automatic static optimization. https://nextjs.org/docs/messages/empty-object-getInitialProps
error - Error: Error serializing `.common` returned from `getServerSideProps` in "/[[...contentPath]]".
Reason: `object` ("[object Error]") cannot be serialized as JSON. Please only return JSON serializable data types.
2

Not sure if this fixes your specific issue, but there is currently a bug in the commonQuery that will only return results from the “get” fields. This is fixed in the upcoming patch of the next js template that we are working on. Will be available asap :slight_smile:

3

@tsi We will see :slight_smile:

Thx

4

New version is out 0.8.3 is out, can you test if the fix helps?

5

@tsi Unfortunatelly the new version thows an error:

error - ./node_modules/next/dist/client/dev/amp-dev.js
Module not found: Can't resolve 'D:\Developementudemy\nextjs-enonic-demo\node_modules\next\dist\compiled\regenerator-runtime\runtime.js' in 'D:\Developement\udemy\nextjs-enonic-demo\node_modules\next\dist\client\dev'
(node:32080) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)

I recognized that React was updated to v18 here , is that mandatory ?

Thomas

6

@tsi I do not exactly know why, but the error disappeared … but I have some other issues with the new version. I found that the changes in BaseComponent causes conflicts:

  • Next Links do not work in ChildList
  • I use ChakraUI for Styling, which worked in v 0.8 without any issues, but in v0.8.3 the components are not styles correct. I changed BaseComponent to an older revision → f8629eb0f2071ed2f97ed776eff35c71059d41d6 (the changes in revision e533c9be4b2b26d198aa96e3e31aafa894dc665a with introducing node-html-parser and html-react-parser breaks the code). With this revision Chakra works again!
  • on my startpage I get the following error
next-dev.js?3515:25 Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.
7

Hi Luctho. FYI: We investigated the ChakraUI error, a fix is coming with the upcoming release of Next.xp - which will also include other new features and improvements ofc.

Details on the fix is here: https://github.com/enonic/nextjs-enonic-demo/pull/267

1 Like