I’ve been banging my head against a wall on this one for about 3 hours now. Basically, I want to access Tribe Events Calendar events posts in my website so I can include “Upcoming Events” and “Current Exhibitions” on the home page, which are in the events calendar, but I am unable to. Here is what I’ve done so far:
-
I first tried to use the Tribe Events Calendar endpoint tribe/events/v1/events/ (the link will go to the endpoint on my WordPress instance) by adding it as a custom post type in my
frontity.settings.js
file as such instate.source
:postTypes: [{ type: 'tribe_events', endpoint: 'tribe/events/v1/events', archive: '/events' }]
Then I added this to my root
index.js
:actions: { theme: { beforeSSR: async ({ actions }) => { await actions.source.fetch('/tribe/events/v1/events') } } }
Then in the necessary component:
const upcomingEventLink = `/${post.acf.upcoming_event.post_name}/${post.acf.upcoming_event.post_name}` useEffect(() => { actions.source.fetch(upcomingEventLink) }, []) const upcomingEventData = state.source.get(upcomingEventLink) return (<pre>{(upcomingEventData.isReady) ? state.source[post.acf.upcoming_event.post_type][post.acf.upcoming_event.ID].featured_media : 'nothing'}</pre>)
But that didn’t work, my hunch is it’s because of their custom namespace. Also, we’ll be coming back to this route later. Here is the error I get:
Proxy ​<target>: {…} ​errorStatus: 404 ​errorStatusText: "Not Found" ​is404: true ​isError: true ​isFetching: false ​isReady: true ​link: "/tribe_events/treasure-box-workshop-with-artist-jannette-vanderhoop/" ​page: 1 ​query: Object { } ​route: "/tribe_events/treasure-box-workshop-with-artist-jannette-vanderhoop/" ​<prototype>: Object { … } ​<handler>: Object { get: get(target, key, receiver), has: has(target, key), ownKeys: ownKeys(target), … }
-
I exposed
tribe_events
post types using the example found in WordPress documentation and can now see that at /wp-json/wp/v2/tribe-events (the link will go to the endpoint on my WordPress instance):add_filter( 'register_post_type_args', 'expose_tribe_events_to_rest', 10, 2 ); function expose_tribe_events_to_rest( $args, $post_type ) { if ('tribe_events' === $post_type) { $args['show_in_rest'] = true; // Optionally customize the rest_base or rest_controller_class $args['rest_base'] = 'tribe-events'; $args['rest_controller_class'] = 'WP_REST_Posts_Controller'; } return $args; }
This is also not working even though I can see that the REST route has been added. This is the error I get from that:
Proxy <target>: {…} errorStatus: 404 errorStatusText: "You have tried to access content at route: /tribe_events/treasure-box-workshop-with-artist-jannette-vanderhoop/ but it does not exist" is404: true isError: true isFetching: false isReady: true link: "/tribe_events/treasure-box-workshop-with-artist-jannette-vanderhoop/" page: 1 query: Object { } route: "/tribe_events/treasure-box-workshop-with-artist-jannette-vanderhoop/" <prototype>: Object { … } <handler>: Object { get: get(target, key, receiver), has: has(target, key), ownKeys: ownKeys(target), … }
The other issue with this is that I don’t get any of the metadata associated with the event, such as start time, end time, venue, organizer, etc. This is probably on the WordPress side and may have to do with the
rest_controller_class
or I may need to manually add the data to the posts via this method. -
I’ve also tried various incantations of the fetch in the
beforeSSR
and theuseEffect
because I am never sure if I should be fetching the post type,tribe_events
, or the endpoint, which is eitherevents
ortribe-events
.
What might be worth noting is I have another component that requires a custom post referenced in the current post’s advanced custom fields meta data and that is working just fine. I have registered the custom post type in WordPress, registered it in frontity.settings.js
just as I did for the tribe_event
, I fetch the data in beforeSSR
and in useEffect
, and I’m able to grab the featured image as well as I don’t get an error returned.
I’m going off of code I found here in the forums. Namely this thread contained code regarding using an ACF post object to populate a featured image and this thread where @mburridge suggests using custom post type definitions to add events calendar post types to state.source
for use later.