Does anyone have a good example for how to replace it with serverside? I have a [handle].js that currently uses staticpaths but i want to switch to serverside instead. So that eliminates the use of staticpaths but how do I set this up correctly and target the product handle?
#How to replace getStaticPaths with getServerSideProps
cloud ice
brittle laurel
Does anyone have a good example for how to replace it with serverside? I have a ...
getStaticPaths can just be ommited and that's it
cloud ice
well im confused on how to use it in serverside its a bit different
for example what gos in the props ```js
import {getProductHandle } from '../../lib/shopify';
import TestPage from '../../components/testpage';
export default function ProductDetailPage({ handle }) {
return (
<div>
{handle}
</div>
)
}
export async function getServerSideProps(context) {
const product = await getProductHandle();
return {
props: { handle: }, // will be passed to the page component as props
}
}```
brittle laurel
for example what gos in the props ```js
import {getProductHandle } from '../../l...
that seems good
the handle: part is invalid js in this case but I get the point
cloud ice
but how does it fetch shopify data to this page?
im missing a important part at this point
topaz quest
Are you trying to access the name of the product? So if the url is /product/product_name you want to get product_name ?
cloud ice
Are you trying to access the name of the product? So if the url is `/product/pro...
yes thats what i want
brittle laurel
yes thats what i want
well this is why the context object exists
topaz quest
^ context.params.handle
brittle laurel
the context object in getSP and getSSP is pretty much the same
the api isn't really different in any way
only the functionality changes
cloud ice
hmm but dosnt it need to also target js const product = await getProductHandle(); because when using what @topaz quest suggest returns cannot read productByHandle error
like this ```js
import {getProductHandle } from '../../lib/shopify';
import TestPage from '../../components/testpage';
export default function ProductDetailPage({ handle }) {
return (
<div>
{handle}
</div>
)
}
export async function getServerSideProps(context) {
const product = await getProductHandle();
return {
props: { handle: context.params.handle }, // will be passed to the page component as props
}
}```
topaz quest
Im not familiar with the shopify API. What is product equal to?
cloud ice
Im not familiar with the shopify API. What is `product` equal to?
this part js const product = await getProductHandle(); reverse to a query in the /lib/shopify
topaz quest
Can you show the function's code?
cloud ice
this is the function for the query ```js
export async function getProductHandle(handle) {
const query =
{ productByHandle(handle: "${handle}") { id title handle description seo { description title } featuredImage { id url height width altText } options { name values } variants(first: 250) { edges { node { id title price barcode sku image { id url height width altText } } } } metafield1: metafield(namespace: "installatie" key: "handleiding") { reference { ... on GenericFile{ id url } } } metafield2: metafield(namespace: "technische" key: "tekening") { reference { ... on GenericFile{ id url } } } metafield3: metafield(namespace: "explosie" key: "tekening") { reference { ... on GenericFile{ id url } } } metafield4: metafield(namespace: "doorstroom" key: "tabellen") { reference { ... on GenericFile{ id url } } } metafield5: metafield(namespace: "3d_" key: "model") { reference { ... on GenericFile{ id url } } } } }
;
const response = await ShopifyData(query);
const productDetail = response.data.productByHandle
? response.data.productByHandle
: [];
return productDetail;
}```
topaz quest
ah
so why dont you just await getProductHandle(context.params.handle)? 🤔
and then do
return {
props: {
product
}
}
like this? ```js
import {getProductHandle } from '../../lib/shopify';
import TestPage from '../../components/testpage';
export default function ProductDetailPage({ product }) {
return (
<div>
{product}
</div>
)
}
export async function getServerSideProps(context) {
const product = await getProductHandle(context.params.handle)
return {
props: { product }, // will be passed to the page component as props
}
}```
topaz quest
yeah
cloud ice
still TypeError: Cannot read properties of undefined (reading 'productByHandle')
topaz quest
I have no idea how graphql works 😛
cloud ice
its really strange
it should work but it dosnt
i have tested the connection with another query i have and this works fine
somehow it cant reach the handle
I see I have a server error 500 is this because of SSP ?
brittle laurel
I see I have a server error 500 is this because of SSP ?
yes
you could see 500 in any kinda of server thing
@cloud ice your query seems to return nothing
the response seem to have no data
the type error refers to response.data being undefined
you should check this query for errors
one thing that I think graphql really got wrong is errors
cloud ice
yeh how do I handle errors there any suggestions ?
or in this case how do I tackle down the problem of my query?
brittle laurel
yeh how do I handle errors there any suggestions ?
I am not familiar with the api so idk