Volto: Custom listing variation, nested in a tab is not loading for anonymous users

pigeonflight · February 24, 2024, 10:54pm

A custom-created listing variation, nested in a tab does not load for anonymous users.
Built-in listing variations, nested in a tab, work as expected and load for anonymous users.
My custom listing variation works when not nested in a tab.
I'm trying to figure out what is causing this difference.

I've created a new listing variation for Volto.
That's the entry from my config.js

 config.blocks.blocksConfig.listing.variations.push({
    id: 'resourcegridListTemplate',
    title: 'ResourceGrid',
    template: ResourceGridListTemplate,
  });

This means I can now display my listings using my new resource grid:
It looks like this to anonymous users:

But there's a problem:
When I nest my listing with the custom resource grid display in a tab, it no longer loads for anonymous users.
Instead I get this:

It just gets stuck loading.

pigeonflight · February 25, 2024, 1:29am

It seems that the problem is nesting a listing inside a tab. I've confirmed that the issue happens with built-in listing views also.

ichimdav · February 25, 2024, 5:13am

What version of Volto are you using and what tab product?

pigeonflight · February 25, 2024, 11:17am

Volto 17.14.0
@eeacms/volto-tabs-block 7.0.5

ichimdav · February 25, 2024, 11:41am

do you have more than one listing in the tabs?
Is there a pagination needed for that listing?

pigeonflight · February 25, 2024, 11:51am

I have two tabs, each tab has a listing.
They work as expected for an admin. The same listings work as expected for anonymous users when not in a tab.
Edit Plone Site

ichimdav · February 25, 2024, 11:56am

I'm going todo a test myself using Volto 17 and volto-tabs-block.
The reason I've asked about how many listings and if they have pagination is the fact that you need to add the tab block from eeacms to the setting
containerBlockTypes
See this pull request where this was done in core in order to read the
listing block pagination when it was placed within a grid block

EDIT:
This won't work as the construct from Volto expects the blocks to be on the root of the block within the blocks key, while in tabs or accordion you have a more complex data structure as you can see in this screenshot

The logic is that if there is only one listing block or one search block the pagination
argument in URL will be ?page=1 but if there are more than 1 then you get the advanced pagination attribute that is the uid of the object - block uid.

ichimdav · February 25, 2024, 12:57pm

@pigeonflight
I've tried with Volto 17.15.2 and volto-tabs 7.0.5 block and I get the same results from logged in to anonymous but all of the items are public and can be viewed by anon as well, see if you have any errors in the devtools, maybe there is something that prevents the rendering from happening.
If you find something write another comment with the error

pigeonflight · February 25, 2024, 1:31pm

Upgraded to Volto 17.15.2

Volto 17.15.2
Plone 6.0.8
(maybe I should move to Plone 6.0.9).
I set the list criteria to only show externally published.
Still getting the problem

See the following error in the console for anonymous users:

client.js:8 
        
        
       POST http://localhost:3000/++api++/@querystring-search 500 (Internal Server Error)
push../node_modules/superagent/lib/client.js.Request._end @ client.js:772
push../node_modules/superagent/lib/client.js.Request.end @ client.js:676
(anonymous) @ Api.js:87
<computed> @ Api.js:56
(anonymous) @ api.js:205
(anonymous) @ index.js:11
(anonymous) @ middleware.js:22
(anonymous) @ storeProtectLoadUtils.js:58
(anonymous) @ blacklistRoutes.js:30
(anonymous) @ withQuerystringResults.jsx:90
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
(anonymous) @ start-client.jsx:61
Promise.then (async)
loadableReady @ loadable.esm.js:542
client @ start-client.jsx:60
./src/client.js @ client.js:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
__webpack_exec__ @ tslib.es6.mjs:370
(anonymous) @ tslib.es6.mjs:370
webpackJsonpCallback @ jsonp chunk loading:560
(anonymous) @ client.js:2
Show 32 more frames
Show less

The error shows twice in the console, perhaps for each tab?...

ichimdav · February 25, 2024, 1:42pm

@pigeonflight you need to look at plone instance logs as well and see why the restapi call ends in a 500 error. That is a server error so until you find out what happens it's no wonder you don't receive any results.

pigeonflight · February 25, 2024, 2:10pm

seems to be something up with a customview we have in the backend.
Will need to check on that.
These lines in the logs look interesting:

  Module site.customviews.browser.ploneoverrides, line 65, in _makequery
backend-1  | TypeError: 'NoneType' object does not support item assignment

The full traceback:

backend-1  | 192.168.65.1 - - [25/Feb/2024:14:06:47 +0000] "GET /VirtualHostBase/http/localhost%3A3000/Plone/%2B%2Bapi%2B%2B/VirtualHostRoot/?expand=breadcrumbs,actions,navroot,navigation&expand.navigation.depth=3 HTTP/1.1" 304 0 "http://localhost:3000/?activeTab=e1a9720b-ac6f-4d98-a844-f80c69167d23" "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Mobile Safari/537.36"
backend-1  | 2024-02-25 14:06:48 ERROR [Zope.SiteErrorLog:35][waitress-0] TypeError: http://localhost:3000/@querystring-search
backend-1  | Traceback (innermost last):
backend-1  |   Module ZPublisher.WSGIPublisher, line 181, in transaction_pubevents
backend-1  |   Module ZPublisher.WSGIPublisher, line 391, in publish_module
backend-1  |   Module ZPublisher.WSGIPublisher, line 285, in publish
backend-1  |   Module ZPublisher.mapply, line 98, in mapply
backend-1  |   Module ZPublisher.WSGIPublisher, line 68, in call_object
backend-1  |   Module plone.rest.service, line 21, in __call__
backend-1  |   Module plone.restapi.services, line 19, in render
backend-1  |   Module plone.restapi.services.querystringsearch.get, line 96, in reply
backend-1  |   Module plone.restapi.services.querystringsearch.get, line 78, in __call__
backend-1  |   Module plone.app.querystring.querybuilder, line 137, in __call__
backend-1  |   Module site.customviews.browser.ploneoverrides, line 65, in _makequery
backend-1  | TypeError: 'NoneType' object does not support item assignment
backend-1  | 192.168.65.1 - - [25/Feb/2024:14:06:47 +0000] "POST /VirtualHostBase/http/localhost%3A3000/Plone/%2B%2Bapi%2B%2B/VirtualHostRoot/%40querystring-search HTTP/1.1" 500 92 "http://localhost:3000/?activeTab=e1a9720b-ac6f-4d98-a844-f80c69167d23" "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Mobile Safari/537.36"
backend-1  | 2024-02-25 14:06:48 ERROR [Zope.SiteErrorLog:35][waitress-1] TypeError: http://localhost:3000/@querystring-search
backend-1  | Traceback (innermost last):
backend-1  |   Module ZPublisher.WSGIPublisher, line 181, in transaction_pubevents
backend-1  |   Module ZPublisher.WSGIPublisher, line 391, in publish_module
backend-1  |   Module ZPublisher.WSGIPublisher, line 285, in publish
backend-1  |   Module ZPublisher.mapply, line 98, in mapply
backend-1  |   Module ZPublisher.WSGIPublisher, line 68, in call_object
backend-1  |   Module plone.rest.service, line 21, in __call__
backend-1  |   Module plone.restapi.services, line 19, in render
backend-1  |   Module plone.restapi.services.querystringsearch.get, line 96, in reply
backend-1  |   Module plone.restapi.services.querystringsearch.get, line 78, in __call__
backend-1  |   Module plone.app.querystring.querybuilder, line 137, in __call__
backend-1  |   Module site.customviews.browser.ploneoverrides, line 65, in _makequery
backend-1  | TypeError: 'NoneType' object does not support item assignment
backend-1  | 192.168.65.1 - - [25/Feb/2024:14:06:48 +0000] "POST /VirtualHostBase/http/localhost%3A3000/Plone/%2B%2Bapi%2B%2B/VirtualHostRoot/%40querystring-search HTTP/1.1" 500 92 "http://localhost:3000/?activeTab=e1a9720b-ac6f-4d98-a844-f80c69167d23" "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Mobile Safari/537.36"
backend-1  | 127.0.0.1 - - [25/Feb/2024:14:06:48 +0000] "GET /ok HTTP/1.1" 200 2 "-" "Wget"
backend-1  | 127.0.0.1 - - [25/Feb/2024:14:06:58 +0000] "GET /ok HTTP/1.1" 200 2 "-" "Wget"
backend-1  | 127.0.0.1 - - [25/Feb/2024:14:07:08 +0000] "GET /ok HTTP/1.1" 200 2 "-" "Wget"
backend-1  | 127.0.0.1 - - [25/Feb/2024:14:07:19 +0000] "GET /ok HTTP/1.1" 200 2 "-" "Wget"
backend-1  | 127.0.0.1 - - [25/Feb/2024:14:07:29 +0000] "GET /ok HTTP/1.1" 200 2 "-" "Wget"

There's some code that intercepts and modifies queries, specifically for anonymous users, I think I'll try to disable it and see what happens.

pigeonflight · February 25, 2024, 7:00pm

I disabled the custom browser views provided by my custom package (which I won't need, since Volto will be the frontend).
Now the listings in tabs work as expected.

@ichimdav thanks for the guidance

ichimdav · February 25, 2024, 7:12pm

@pigeonflight I'm happy it works for you now.

I go back to my comment that I've left here Volto: Custom listing variation, nested in a tab is not loading for anonymous users - #7 by ichimdav

Don't add more than one listing or search block or if you do make sure
you don't have pagination on any of them while they are inside the tab block.

If any of them have pagination and you click the pagination button on one of the listing blocks, the other one will no longer show results due to a bug.

I've opened a pull request that fixes this in Volto core

but it will still take a little while until it's merged into core and a new release is made.

I expect you not to need pagination due to the listing being hidden either way in tabs but I felt obligated to warn you about this issue since volto-tabs-blocks is one of the packages that we have developed at EEA and thus for you to avoid running into this issue.

pigeonflight · February 25, 2024, 7:27pm

In my case, I don't have or need pagination but I do need two listings. Will keep it in mind. Hopefully it gets fixed in Volto core soon.