Volto: Action To Get Data From RestApi Doesn't work

andreasma · February 7, 2022, 7:07pm

I created a restapi for a Plone addon some weeks ago. The code is here:

I tried to get the categories from this restapi (as a first step), but I wasn't successful yet. I tried to follow (adapted) the Plone 6 training documentation for this (chapter 47). I created:

github.com

andreasma/volto-collective-templates/blob/main/src/actions/categories/categories.js

import { GET_CATEGORIES } from '../../constants/ActionTypes';

export function getCategories(url) {
    return {
      type: GET_CATEGORIES,
      request: {
        op: 'get',
        path: `${url}/@projectcategories`,
      },
    };
  }

github.com

andreasma/volto-collective-templates/blob/main/src/components/Categories/categories.jsx

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { Header, Label, List, Segment } from 'semantic-ui-react';
import { PersonalInformation} from '@plone/volto/components';
import { getUser, updateUser } from '@plone/volto/actions';
import jwtDecode from 'jwt-decode';

import { getCategories } from '~/actions';

const Categories = () => {
    const projectcategories = useSelector((store) => store.categories);  
    const dispatch = useDispatch();  
    let location = useLocation();  
    const content = useSelector((store) => store.content.data);
    
  
  
    React.useEffect(() => {  
      dispatch(getCategories(location.pathname));

This file has been truncated. show original

github.com

andreasma/volto-collective-templates/blob/main/src/reducers/categories/categories.js

import { GET_CATEGORIES } from '~/constants/ActionTypes';

const initialState = {
    loaded: false,
    loading: false,
    error: null,
  };

  
export default function categories(state = initialState, action = {}) {
  switch (action.type) {
    case `${GET_CATEGORIES}_PENDING`:
      return {
        ...state,
        error: null,
        loaded: false,
        loading: true,
      };
    case `${GET_CATEGORIES}_SUCCESS`:
      return {

This file has been truncated. show original

I tried to get with console.debug inside the categories.jsx (inside components/Categories), if the construct is working. I got only:
{ loaded: false, loading: false, error: null }
as result.
I looked into categories.js from reducers and found out that I most likely only got the 'initialState' and nothing.
Thus in my opinion the connection to the restapi is not established yet.
Any hints how to proceed?

tiberiuichim · February 7, 2022, 7:25pm

Some things you can do to debug the problem:

inspect the network trafic in your browser developer console. Is the backend server responding properly? Is the endpoint really called?
Install and peruse the Redux DevTools to observe the redux actions and the how they mutate the global state
Start volto with DEBUG=superagent yarn start, it will log all network trafic on the nodejs server
path: ${url}/@projectcategories may or may not be weird, depending on the way you do the setup. Usually paths are "fixed" before passing them to actions, using either getBaseUrl or flattenToAppURL.

andreasma · February 8, 2022, 7:35pm

I started yarn with the debug option and got the following, if I call in Volto a project URL with '/projectcategories':
GET http://[IP]:3000/++api++/templates/test-45/@projectcategories -> 200 +17ms
superagent GET http://[IP:3000/++api++/templates/test-45/@projectcategories/@workflow -> 404 +20ms
superagent GET http://[IP]:3000/++api++/templates/test-45/@projectcategories/@navigation?expand.navigation.depth=1 -> 404

Thus there is no content to fetch at that URL, right?

The restapi endpoint in the Plone backend for this is:
http://localhost:8080/Plone/templates/test-45/@projectcategories

And if I call this endpoint with Postman I get e.g. the JSON content:
[
"Office"
]

Thus the endpoint seemed to work, but I can't get connected to it within Volto.