Hi there good people,
I have created a Custom UI Confluence Macro and currently my app is split between an index.js where my backend define.resolver methods are located and my App.js, where my frontend functions and HTML are located.
I am getting this validation error when I load my app on my Confluence site:
Error in the JQL Query Expecting operator before the end of the query. The valid operators are '=', '!=', '<', '>', '<=', '>=', '~', '!~', 'IN', 'NOT IN', 'IS' and 'IS NOT'."]
This is what my useEffect method / hook looks like in App.js:
import React, { useEffect, useState } from 'react';
import { invoke } from '@forge/bridge';
function App() {
const [jqlData, setJqlData] = useState(null);
const jqlQuery = 'project = Tiktok';
useEffect(async () => {
const data = await invoke('fetchIssuesCountWithJql', { jqlQuery });
setJqlData(data);
console.log(`Here is the data: ${data.total}`);
}, []);
return (
<div>
Total issues: {jqlData ? jqlData.total : '0'}
{/* {jqlData ? JSON.stringify(jqlData) : 'Loading...'} */}
</div>
);
}
export default App;
And in my index.js backend, this is the ‘fetchIssuesCountWithJql’ resolver.define method:
import Resolver from '@forge/resolver';
import api, { route } from '@forge/api';
const resolver = new Resolver();
resolver.define('fetchIssuesCountWithJql', async (jqlQuery) => {
const res = await api
.asApp()
.requestJira(route`/rest/api/3/search?jql=${jqlQuery}&maxResults=0`);
const data = await res.json();
return data;
});
I just can’t see why it complains that the JQL is invalid. If I create a standard Confluence UI Kit plugin and use exactly the same way to call the API, it works without issues. I wonder if the Custom UI template has an issue passing the JQL from the frontend to the backend.
These are the package versions I’m using from packages.json:
"dependencies": {
"@forge/bridge": "^2.4.0",
"@forge/resolver": "^1.4.10",
"@forge/ui": "^1.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
Any ideas would be very welcome as I am seriously stuck at the moment on this.
Thanks folks!