import{inject}from'@orodio/inject-template'constmagicString=inject` One ${d=>d.type}, Two ${d=>d.type},${d=>d.color1}${d=>d.type},${d=>d.color2}${d=>d.type}.`conststr=magicString({type: 'fish',color1: 'Red',color2: 'Blue',})console.log(str)// One fish,// Two fish,// Red fish,// Blue fish.
Advanced Example
// ./graphql.jsimport{inject}from'@orodio/inject-template'exportconstgraphQL=(...query)=>(data={})=>fetch(GRAPHQL_URL,{
...method(),
...headers(),body: JSON.stringify({query: inject(...query)(data)// -------- THIS BIT}),}).then(res=>res.json())// ./Counter.jsimportReactfrom'react'import{graphQL}from'./graphql'// -------------------------------------------- AND THIS BITconstquery=graphQL` query { counter(id: "${d=>d.id/* :magic: interpolating in a function :magic: */}") { title count } }`exportclassCounterextendsReact.Component{state={loading: true,count: 0,title: "",}componentDidMount(){const{ id }=this.propsquery({ id })// -------------------------- ALSO THIS BIT.then(res=>this.setState({loading:false,
...res.data.counter})}render(){const{loading,count,title}=this.statereturnloading
? <div>Loading...</div>
: <div>{title}: {count}</div>}}