{"id":42998,"date":"2020-08-13T20:03:00","date_gmt":"2020-08-13T20:03:00","guid":{"rendered":"http:\/\/sticky-highjinx.flywheelsites.com\/?p=42998"},"modified":"2025-03-03T08:40:24","modified_gmt":"2025-03-03T13:40:24","slug":"lazy-load-components-and-services-in-spfx-part-one","status":"publish","type":"post","link":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/","title":{"rendered":"Lazy Load Components and Services in SPFX: Part One"},"content":{"rendered":"Reading Time: <\/span> 5<\/span> minutes<\/span><\/span>\n

Load React components and services on demand to optimise your SharePoint Framework web parts and site extensions.<\/h2>\n\n\n\n

When you build collaboration tools that can be reused and configured for different needs, chances are there are going to be bells and whistles that are not used in every instance. Along a similar line, resources may be required in an editing context, but not in a reading context. Does it make sense for end users to wait for code to load that they never get a chance to use? Intelligent lazy loading provides a mechanism to load-in components or services on demand and only when necessary. <\/p>\n\n\n\n

Not unique to SharePoint \u2014 in the greater sphere of modern JS development,\u00a0on-demand loading is called\u00a0code splitting<\/a>. The technique we utilize is called a\u00a0dynamic import<\/a>.\u00a0<\/p>\n\n\n\n

This last link to MDN docs on dynamic imports is really the gist of the technique. Read on for real-life examples of lazy loading React components and services. With any luck, this will inspire you to implement the feature in your apps, improving the quality of products you ship to your clients. <\/p>\n\n\n\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\"A<\/div><\/a>\n\t\t\t\t
\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\"A<\/div><\/a>\n\t\t\t\t
White Paper<\/div>\n\t\t\t\t
\n\t\t\t\t

\n\t\t\t\n\t\t\t\tHidden Treasures of Advanced Warehousing\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t
\n\t\t\t

Make the most of Microsoft Dynamics 365\u2019s Advanced Warehousing module and gain insight into the hidden treasures to unlock value.<\/p>\n\t\t<\/div>\n\t\t\n\t\t

SPFX yeoman generator<\/a>. Therefore,\u00a0we\u00a0will\u00a0omit that boilerplate and jump straight to a scenario involving React components.\u00a0<\/p>\n\n\n\n

Define Widget Interfaces <\/h2>\n\n\n\n

For our demo purposes, our web part displays rows of widgets. A basic widget shows text content and a link. Our web part, however, allows a content editor to add additional widget types such as ‘current weather’ and ‘bot chat.’ <\/p>\n\n\n\n

First, we’ll define interfaces to represent the required properties of each widget. A type enum will simplify type-checking later. <\/p>\n\n\n\n

IWidgets.ts:<\/h3>\n\n\n\n
export enum WidgetType { \n  text, \n  weather, \n  botChat \n}; \nexport interface IWidget { \n  heading: string; \n  type: WidgetType; \n} \nexport interface ITextWidget extends IWidget { \n  content: string; \n  url: string; \n} \nexport interface IWeatherWidget extends IWidget { \n   apiKey: string; \n} \nexport interface IBotChatWidget extends IWidget { \n  odataConfiguration: any; \n} <\/code><\/pre>\n\n\n\n
Provide Widgets Directly to React Component<\/h2>\n\n\n\n
An example set of widgets: <\/p>\n\n\n\n
const textWidget:ITextWidget { \n  heading: 'Get Involved', \n  type: WidgetType.text, \n  content: 'Discover how you can become more engaged with WidgetCo.', \n  url: '\/\/#get-involved', \n}; \nconst weatherWidget:IWeatherWidget = { \n  heading: 'Current Weather', \n  type: WidgetType.weather, \n  apiKey: '1234-abcd', \n}; \nconst chatBotWidget:IChatBotWidget = { \n  heading: 'Chat', \n  type: WidgetType.botChat,  \n  odataConfiguration: { \n    address: 'bot.chat\/endpoint', \n    \/\/ [...] \n  } \n}; \nconst widgets:IWidget[] = [ \n  textWidget, \n  weatherWidget, \n  chatBotWidget \n];  \n<\/code><\/pre>\n\n\n\n
Our example would be applicable when widgets are loaded in from a list, but for brevity’s sake, we will show widgets passed directly to the main React component as if defined in the property pane. The render function shows a beginning which we will update later to display each type of widget uniquely. <\/p>\n\n\n\n
WidgetsDisplay.tsx: <\/h3>\n\n\n\n
import * as React from 'react'; \nimport { IWidget } from '.\/IWidgets.ts'; \nexport interface IWidgetsDisplayProps { \n  widgets: IWidget[]; \n} \nexport default class WidgetsDisplay extends React.Component<IWidgetsDisplayProps, {}> { \n  public render(): React.ReactElement<IWidgetsDisplayProps> { \n    const { widgets } = this.props; \n    return ( \n      <div> \n        {\/* show each widget *\/} \n        {widgets.map(item => ( \n          <div>\n            <h3>{widget.heading}<\/h3> \n          <\/div> \n        )} \n      <\/div> \n    ); \n  } \n} \n<\/code><\/pre>\n\n\n\n
Defining Widget Components <\/h2>\n\n\n\n
It is a standard convention to use separate files for different components, but it is especially important here since we plan to dynamically import these later. Additionally, any interfaces that describe the component properties should be separated from the component files. That way, a client can use strongly typed properties without loading the components themselves. <\/p>\n\n\n\n
Our text widget is a standard functional or state-less component. <\/p>\n\n\n\n
TextWidget.tsx<\/strong>: <\/h3>\n\n\n\n
import * as React from 'react';\nimport { ITextWidget } from '.\/IWidgets.ts';\nexport const TextWidget = ({\n  heading,\n  content,\n  url,\n}) => {\n  return (\n    <div>\n        <h3>{heading}<\/h3>\n        <p>{content}<\/p>\n        <a href={url}>Read more<\/a>\n    <\/div>\n  );\n};\nexport default TextWidget;\n<\/code><\/pre>\n\n\n\n
Our weather widget will load in weather data when mounted. It’s important to note that so far we have avoided external libraries; however, in WeatherWidget, we import a component from fluent ui<\/a>. Without asynchronous loading, code we import into a component (i.e., a fluent ui package) would be included in the code bundle which is loaded by the end user. <\/p>\n\n\n\n
WeatherWidget.tsx: <\/h3>\n\n\n\n
import * as React from 'react';\nimport { Icon } from '@fluentui\/react\/lib\/Icon';\nimport { IWeatherWidget }  from '.\/IWidgets.ts';\nexport interface IWeatherWidgetState {\n  isLoading?: boolean;\n  weatherData?: {\n    temp: number;\n    icon: string;\n  }\n}\nexport default class WeatherWidget extends React.Component<IWeatherWidget, IWeatherWidgetState> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isLoading: false,\n      weatherData: null\n    };\n  }\n  public componentDidMount() {\n    this.setState({ isLoading: true });\n    \/\/ load data from weather api\n    const { apiKey } = this.props;\n    setTimeout(() => {\n      this.setState({\n        isLoading: false,\n        weatherData: {\n          temp: 77,\n          icon: cloudy-sun\n        }\n      });\n    }, 2000);\n  }\n\n  public render(): React.ReactElement<IWeatherWidget> {\n    const {\n        heading,\n      } = this.props,\n      {\n        weatherData,\n        isLoading\n      } = this.state;\n    return (\n      <div>\n         <h3>{heading}<\/h3>\n         {isLoading && <p>Loading...<\/p>}\n         {!!weatherData && (\n           <div>\n             <Icon iconName={icon} \/>\n             <strong>{temp}\u00b0<\/strong>\n           <\/div>\n        )}\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n
Lazy Loading a Service into a Component <\/h2>\n\n\n\n
Our chat bot will incorporate a slightly different scenario. We’ll imagine that the service that powers our chat bot is rather bulky. Since we do not technically need it until the user interacts with the widget, we will wait until then to asynchronously load the service. <\/p>\n\n\n\n
Defining an interface for our service allows us to programme to an interface instead of an instance \u2014 crucial for maintaining strongly-typed code when using dynamic imports. <\/p>\n\n\n\n
IChatBotService.ts: <\/h3>\n\n\n\n
export default interface IChatBotService {\n  odataConfiguration: any;\n  postMessage(message:string) => Promise<string>;\n}\n<\/code><\/pre>\n\n\n\n
ChatBotService.ts: <\/h3>\n\n\n\n
Import iChatBotService from '.\/IChatBotService';\nexport class ChatBotService implements IChatBotService {\n  constructor(public odataConfiguration: any) {}\n  postMessage(message:string): Promise<string> {\n    return new Promise((resolve)=> {\n      setTimeout(() => {\n        resolve('Ask again later.');\n      }, 2000);\n    });\n  }\n}\n<\/code><\/pre>\n\n\n\n
A true bot chat implementation would be lengthier, but this gets the idea across. <\/p>\n\n\n\n
ChatBotWidget.tsx: <\/h3>\n\n\n\n
import * as React from 'react';\nimport { IChatBotWidget } from '.\/IChatBotWidget.ts';\nimport { DefaultButton } from '@fluentui\/react\/lib\/Button';\nexport interface IChatBotWidgetState {\n  isLoading?: boolean;\n  message?: string;\n  visible?: boolean;\n}\nexport default class ChatBotWidget extends React.Component<IChatBotWidget, IChatBotWidgetState> {\n  private ChatBotService:IChatBotService;\n  constructor(props) {\n    super(props);\n    this.state = {\n      isLoading: false,\n      message: '',\n      visible: false,\n    };\n  }\n\n  public render(): React.ReactElement<IChatBotWidget> {\n    const {\n      isLoading,\n      message,\n      visible,\n    } = this.state;\n    return (\n      <div>\n        <h3>{heading}<\/h3>\n        <DefaultButton onClick={this.toggleDialog}>{!visible ? 'Ask a question' : 'Cancel'}<\/DefaultButton>\n        {isLoading && <p>...<\/p>}\n        {visible && (\n          <div>\n            <TextField\n              onChange={(ev, newValue) => { this.setState({ message: newValue }); }\n              value={message}\n            \/>\n            <DefaultButton onClick={this.postMessage} \/>\n          <\/div>\n        })\n      <\/div>\n    );\n  }\n\n  private toggleDialog = async () => {\n    if (!this.ChatBotService) {\n      const { odataConfiguration } = this.props;\n      const imported = await import('.\/ChatBotService.ts');\n      this.ChatBotService = new imported.default(odataConfiguration);\n    }\n    this.setState({ visible: !this.state.visible });\n  }\n\n  private postMessage = async () => {\n    const response = await this.ChatBotService.postMessage(this.state.message);\n    alert(response);\n  }\n}\n<\/code><\/pre>\n\n\n\n
You may have missed the dynamic import as it is only a few lines of code. We waited until the appropriate interaction, aka clicking the ‘Ask a question’ button. At that point, we checked for the presence for our service (useful if the user may repeat this interaction). If not initialized, we use the `await import(‘name’)` syntax to lazy load our service. It is important to refer to `.default` of our imported results \u2014 this shape will be consistent for any dynamically imported module. <\/p>\n\n\n\n
A service that is only required after user interaction is a great candidate for lazy loading. By importing our ChatBotService dynamically, we have split our code into separate bundle files: one for the ChatBotService and one for everything else. When we publish our sppkg file to SharePoint, each bundle file will be uploaded; however, the bundle associated with our service will be loaded on demand. <\/p>\n\n\n\n
In our next blog, we will implement lazy loading for React components. <\/p>\n","protected":false},"excerpt":{"rendered":"
Load React components and services on demand to optimise your SharePoint Framework web parts and site extensions.<\/p>\n","protected":false},"author":22,"featured_media":46178,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","_searchwp_excluded":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[3475],"tags":[3746,3561,3938],"class_list":["post-42998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-dynamics-365","tag-microsoft","tag-project-operations"],"acf":[],"yoast_head":"\nLazy Load Components in SPFx \u2013 Part 1 | enVista<\/title>\n<meta name=\"description\" content=\"Load React components and services on demand to optimise your SharePoint Framework web parts and site extensions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Load Components in SPFx \u2013 Part 1 | enVista\" \/>\n<meta property=\"og:description\" content=\"Load React components and services on demand to optimise your SharePoint Framework web parts and site extensions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/\" \/>\n<meta property=\"og:site_name\" content=\"enVista Australia\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-13T20:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-03T13:40:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2020\/08\/shutterstock_357486680-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"enVista Marketing\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"enVista Marketing\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lazy Load Components in SPFx \u2013 Part 1 | enVista","description":"Load React components and services on demand to optimise your SharePoint Framework web parts and site extensions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/","og_locale":"en_US","og_type":"article","og_title":"Lazy Load Components in SPFx \u2013 Part 1 | enVista","og_description":"Load React components and services on demand to optimise your SharePoint Framework web parts and site extensions.","og_url":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/","og_site_name":"enVista Australia","article_published_time":"2020-08-13T20:03:00+00:00","article_modified_time":"2025-03-03T13:40:24+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2020\/08\/shutterstock_357486680-scaled.jpg","type":"image\/jpeg"}],"author":"enVista Marketing","twitter_card":"summary_large_image","twitter_misc":{"Written by":"enVista Marketing","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#article","isPartOf":{"@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/"},"author":{"name":"enVista Marketing","@id":"https:\/\/envistacorp.com\/en-au\/#\/schema\/person\/c938d19b1c760a4e1c353086018cb894"},"headline":"Lazy Load Components and Services in SPFX: Part One","datePublished":"2020-08-13T20:03:00+00:00","dateModified":"2025-03-03T13:40:24+00:00","mainEntityOfPage":{"@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/"},"wordCount":886,"commentCount":0,"publisher":{"@id":"https:\/\/envistacorp.com\/en-au\/#organization"},"image":{"@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#primaryimage"},"thumbnailUrl":"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2020\/08\/shutterstock_357486680-scaled.jpg","keywords":["Dynamics 365","Microsoft","Project Operations"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/","url":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/","name":"Lazy Load Components in SPFx \u2013 Part 1 | enVista","isPartOf":{"@id":"https:\/\/envistacorp.com\/en-au\/#website"},"primaryImageOfPage":{"@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#primaryimage"},"image":{"@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#primaryimage"},"thumbnailUrl":"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2020\/08\/shutterstock_357486680-scaled.jpg","datePublished":"2020-08-13T20:03:00+00:00","dateModified":"2025-03-03T13:40:24+00:00","description":"Load React components and services on demand to optimise your SharePoint Framework web parts and site extensions.","breadcrumb":{"@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#primaryimage","url":"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2020\/08\/shutterstock_357486680-scaled.jpg","contentUrl":"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2020\/08\/shutterstock_357486680-scaled.jpg","width":2560,"height":1707,"caption":"A person types on a laptop at a wooden desk, with data charts and graphs digitally overlaid above the screen, suggesting analysis or business activity. Sunlight shines on the right side of the workspace."},{"@type":"BreadcrumbList","@id":"https:\/\/envistacorp.com\/en-au\/2020\/08\/13\/lazy-load-components-and-services-in-spfx-part-one\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/envistacorp.com\/en-au\/"},{"@type":"ListItem","position":2,"name":"Lazy Load Components and Services in SPFX: Part One"}]},{"@type":"WebSite","@id":"https:\/\/envistacorp.com\/en-au\/#website","url":"https:\/\/envistacorp.com\/en-au\/","name":"enVista Australia","description":"Enabling Enterprise Commerce","publisher":{"@id":"https:\/\/envistacorp.com\/en-au\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/envistacorp.com\/en-au\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/envistacorp.com\/en-au\/#organization","name":"enVista Australia","url":"https:\/\/envistacorp.com\/en-au\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/envistacorp.com\/en-au\/#\/schema\/logo\/image\/","url":"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2021\/10\/enVista_Logo_White-1.png","contentUrl":"https:\/\/envistacorp.com\/en-au\/wp-content\/uploads\/sites\/4\/2021\/10\/enVista_Logo_White-1.png","width":348,"height":152,"caption":"enVista Australia"},"image":{"@id":"https:\/\/envistacorp.com\/en-au\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/envistacorp.com\/en-au\/#\/schema\/person\/c938d19b1c760a4e1c353086018cb894","name":"enVista Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/908735372279b00297ea13e45a4947cdb05e2ee7244abfcfb3ea9d263679fa53?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/908735372279b00297ea13e45a4947cdb05e2ee7244abfcfb3ea9d263679fa53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/908735372279b00297ea13e45a4947cdb05e2ee7244abfcfb3ea9d263679fa53?s=96&d=mm&r=g","caption":"enVista Marketing"},"description":"enVista was founded by supply chain and technology experts in response to market demand for skilled consulting services. Read posts by our Thought Leaders.","url":"https:\/\/envistacorp.com\/en-au\/author\/envistamarketing\/"}]}},"_links":{"self":[{"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/posts\/42998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/comments?post=42998"}],"version-history":[{"count":0,"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/posts\/42998\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/media\/46178"}],"wp:attachment":[{"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/media?parent=42998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/categories?post=42998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/envistacorp.com\/en-au\/wp-json\/wp\/v2\/tags?post=42998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}