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 25

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.