Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Hi,
I'm building a demo private app using the Storefront API. I'm using Apollo Client to request data, all works fine except the product descriptionHtml.
Expected behavior: get descriptionHtml preserving HTML tags. Ex: <p>Test</p>
Currently behavior: get descriptionHtml as string.
This is how I configure Apollo and use it:
import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import * as fetch from 'node-fetch';
const httpLink = createHttpLink({
uri: 'https://{shop}.myshopify.com/api/2021-01/graphql.json',
fetch,
});
const authLink = setContext((_, { headers }) => {
const shopifyHeaders = {
'X-Shopify-Storefront-Access-Token': ACCESS_TOKEN,
};
return {
headers: {
...headers,
...shopifyHeaders,
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
Then I use the Apollo Client instance to performance a simple produt query:
// ... code
client.query({
query: ALL_PRODUCTS,
variables: {
numProducts: filter.numProducts || 10,
}
})
.then(result => resolve(result.data))
.catch(error => reject(error))
// ... code
export const ALL_PRODUCTS = gql `query AllProducts($numProducts: Int!) {
products(first:$numProducts) {
edges {
node {
id
title
descriptionHtml
}
}
}
}`;
I'm not sure if it's a default Apollo behavior, something related to Shopify API or if I'm missing something...
Any help...Thanks
I just tested it on a store I'm working on and descriptionHtml returned what was expected, a string like "<p>Description of the product</p>".
You will still need to turn the HTML string back into actual markup, eg. dangerouslySetInnerHTML in React.
What are you getting back, is descriptionHtml the exact same as description for you?
Thanks for reply @c10s , yes I'm getting back descriptionHtml as description. It's a backend Nodejs app, It is not a React app.
So.. descriptionHtml currently returns a plain string like description.