Out now! Check out the Poll results: Do you have a Shopify store?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How to get a product description preserving the HTML format with Apollo?

How to get a product description preserving the HTML format with Apollo?

Hiroshi
Tourist
10 0 0

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

Replies 2 (2)

c10s
Shopify Partner
67 12 27

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?

Hiroshi
Tourist
10 0 0

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.