I'm struggling to understand how dynamic routes are created with something like Contentful.
Pulling data with graphQL from contentful and looking to make 2 dynamic routes
example.com/companies/[companyName]
example.com/pages/[pageCategory]
#Contentful Dynamic Routes
hollow egret
hollow egret
I feel like I'm going about this in a horribly difficult way...
The console log returns:
[
'{slug: "Lastpass", text: "Lastpass", title: "Lastpass}',
'{slug: "Wix", text: "Wix", title: "Wix}',
'{slug: "Zoom", text: "Zoom", title: "Zoom}',
'{slug: "Surveymonkey", text: "Surveymonkey", title: "Surveymonkey}',
'{slug: "Sendgrid", text: "Sendgrid", title: "Sendgrid}',
'{slug: "Atlassian", text: "Atlassian", title: "Atlassian}',
'{slug: "Workday", text: "Workday", title: "Workday}',
'{slug: "Square", text: "Square", title: "Square}',
'{slug: "Zendesk", text: "Zendesk", title: "Zendesk}',
'{slug: "Pipedrive", text: "Pipedrive", title: "Pipedrive}',
'{slug: "Dropbox", text: "Dropbox", title: "Dropbox}',
'{slug: "Mailchimp", text: "Mailchimp", title: "Mailchimp}',
'{slug: "Logmein", text: "Logmein", title: "Logmein}',
'{slug: "Freshbooks", text: "Freshbooks", title: "Freshbooks}',
'{slug: "Shopify", text: "Shopify", title: "Shopify}',
'{slug: "Twilio", text: "Twilio", title: "Twilio}',
'{slug: "Docusign", text: "Docusign", title: "Docusign}',
'{slug: "Salesforce", text: "Salesforce", title: "Salesforce}',
'{slug: "WebFlow", text: "WebFlow", title: "WebFlow}',
'{slug: "Hubspot", text: "Hubspot", title: "Hubspot}'
]
It's not wrapped in an object, but even if it was i would need to get rid of the string literals. So i figured im probably going about this in a wrong way.
hollow egret
ruby wind
The console log returns:
[
'{slug: "Lastpass", text: "Lastpass", title: "Last...
This looks like the right approach for getting the slugs - is it not generating the pages?
hollow egret
The code is wrong. Since its all wrapped in string literals.
rigid lintel
I think the companies are returning a string right now! Delete the ` character
ruby wind
ah yes, I missed that! replace the ` with (
fallen ice
hello 😇
hollow egret
const companies = company.map((data) => ({slug: data.company, text: data.company, title: data.company}))
[
{ slug: 'Lastpass', text: 'Lastpass', title: 'Lastpass' },
{ slug: 'Wix', text: 'Wix', title: 'Wix' },
{ slug: 'Zoom', text: 'Zoom', title: 'Zoom' },
{ slug: 'Surveymonkey', text: 'Surveymonkey', title: 'Surveymonkey' },
{ slug: 'Sendgrid', text: 'Sendgrid', title: 'Sendgrid' },
{ slug: 'Atlassian', text: 'Atlassian', title: 'Atlassian' },
{ slug: 'Workday', text: 'Workday', title: 'Workday' },
{ slug: 'Square', text: 'Square', title: 'Square' },
{ slug: 'Zendesk', text: 'Zendesk', title: 'Zendesk' },
{ slug: 'Pipedrive', text: 'Pipedrive', title: 'Pipedrive' },
{ slug: 'Dropbox', text: 'Dropbox', title: 'Dropbox' },
{ slug: 'Mailchimp', text: 'Mailchimp', title: 'Mailchimp' },
{ slug: 'Logmein', text: 'Logmein', title: 'Logmein' },
{ slug: 'Freshbooks', text: 'Freshbooks', title: 'Freshbooks' },
{ slug: 'Shopify', text: 'Shopify', title: 'Shopify' },
{ slug: 'Twilio', text: 'Twilio', title: 'Twilio' },
{ slug: 'Docusign', text: 'Docusign', title: 'Docusign' },
{ slug: 'Salesforce', text: 'Salesforce', title: 'Salesforce' },
{ slug: 'WebFlow', text: 'WebFlow', title: 'WebFlow' },
{ slug: 'Hubspot', text: 'Hubspot', title: 'Hubspot' }
]
I dont know how to wrap this into an object, then it would work i think 😄
actually no, this should work
fallen ice
uhmm you can combine the two maps into one map
rigid lintel
Also any reason to repeat the same data? You can access const { slug } = Astro.params in the template
hollow egret
Also any reason to repeat the same data? You can access `const { slug } = Astro....
probably not, just a noob. Trying to get this to work in someway to start of with.
Hmm it does work with the above. The slug needs to start with uppercase
rigid lintel
Ah, you probably just want to return data.company.toLowerCase() then 🙂
hollow egret
I feel like slugs should match even if its uppercase or lowecase, but ill fix it in the code.
hollow egret
Ah, you probably just want to return `data.company.toLowerCase()` then 🙂
thanks!
rigid lintel
URLs are treated as case insensitive by many hosts, but it totally depends on your setup. By default URLs are treated as case sensitive, so we don't want to force it one way or another for everyone
hollow egret
OK but this is neat, i can create all sorts of dynamic pages now!
fallen ice
I can share a draft guide of contentful if it may help to see an example 👀
hollow egret
Thank you!
hollow egret
I can share a draft guide of contentful if it may help to see an example 👀
It works now, but id like to have a look.
fallen ice
I am deploying a preview link, I will share as soon as its done building
hollow egret
Awesome 🙂
hollow egret
Ohh wow, this looks like a clean way of doing this. When will this get published or could I follow along already?
fallen ice
is on the making, please if you have any feedback I would like to hear it
hollow egret
Ill follow along tomorrow and give feedback.
hollow egret
Is there an advantage to using the contentful sdk vs using graphql to fetch the data?