State.route.link as a variable

šŸ™‹Get Help
1

Hi I am new in frontity so do not judge me harshly :grinning:.
I am trying to use variable for state.route.link but it does not work at least for me.

const List = ({ state, libraries }) => {
  //   const data = state.source.get(state.router.link);
  const city = "/mycity/stock/";
  const data = state.source.get(city);
  const Html2React = libraries.html2react.Component;
  const page = state.source[data.type][data.id];
  console.log("page: ", page);
  ...

I got error as usual ā€œCannot read property ā€˜undefinedā€™ of undefinedā€ for const page. Probably itā€™s because I have isReady: false in const data. Any suggestions?

Or how can I get the page from WP not using URL? I mean I have page ā†’ ā€œcityā€ and need to get several different pages (London/Stockholm etc) on localhost/mycity/stock according my city-params .

2

Hi @vova.champion

Welcome to the Frontity community.

Is mycity a CPT? If so is it available in the WP REST API? And if that is the case then have you configured it in frontity.settings.js - see here?

If the above doesnā€™t help you to resolve the problem then please provide a link to a repo or a codesandbox. Please see here for the kind of info that you can provide that will help the community to help you.

3

Thanks for answer! What is CTP? :slightly_smiling_face:
If I use const data = state.source.get(state.router.link); and I am on that page /mycity/stock/ it works fine.

4

OK, in that case you probably need to pre-fetch the data using a beforeSSR function. You will also need to add logic to your component to check that the data exists before trying to access it.

Take a look at this repo for an example of using a beforeSSR function to fetch data from WP - in particular the index.js file (lines 45-47).

BTW: CPT = Custom Post Type.

5

Thanks Iā€™ll try it!

6

something like thisā€¦ Iā€™ve not checked it fully though

index.js

beforeSSR: async ({ state, actions, libraries }) => {
  // for a specific route (or set of routes) rather than all of them
  if(state.router.link.startsWith('/whatever/')) {
    // fetch the city/stock data
    await actions.source.fetch("/mycity/stock/")
  }
}

list.js

const List = ({ state, actions, libraries }) => {
  
  // get data for this route
  const data = state.source.get(state.router.link)
  
  // get data for city (available from SSR)
  const city = "/mycity/stock/"
  const stock_data = state.source.get(city)

 // fetch data if navigating clientside
 // (not sure if this is required)
  useEffect(() => {
    actions.source.fetch(city)  
  },[])

  // once both sets of data ready, render component
  return (data.isReady && stock_data.isReady) && (
  ...
  )
}
1 Like
7

@codemonkeynorth Thanks for the solution. It kind of works, but does not look for dynamically changeable cities :slight_smile: Thanks anyway!

8

Yes only going from the example provided (your city was const)

For readability you can create a function (possibly even imported from an external file) eg
const before = ā€¦

and then do beforeSSR: before,

Youā€™ll just need to parse your route for the dynamic part and do the same in your component

1 Like
9

@codemonkeynorth Thanks!