Hey! Trying out the new embed feature, but when a query runs in the embed app I get a 404 not found error in the Javascript console. I've added read access to the Resources in the Permission Group of the Embed site. I've tried with both a BigQuery and a REST resource with the same result.
I am using the react-retool package, in a next.js app.
Here is the component that renders the page:
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Retool from 'react-retool';
export default function IdPage() {
const router = useRouter();
const { id } = router.query;
const [data, setData] = useState(null);
useEffect(() => {
if (id) {
fetch(`/api/getEmbedLink?id=${id}`)
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error(error));
}
}, [id]);
const params = {
id: id,
name: "Theo",
}
return (
<>
<h1>This is the page for ID: {id}</h1>
{data && (
<Retool
url={data.embedUrl}
data={params}
/>
)}
</>
);
}
and this is the API route that gets the embed link
import axios from 'axios';
export default async function handler(req, res) {
const externalApiUrl = `https://runwith.retool.com/api/embed-url/external-user`;
const requestBody = {
'landingPageUuid': "0c91cbfc-0b6c-11ee-816f-97d08a277713",
'groupIds': [LIST OF THE GROUPS IM IN],
'externalIdentifier': <MY EMAIL>,
'userInfo': {
'email': <MY EMAIL>,
}
};
const requestHeaders = {
'Content-Type': 'application/json',
'Authorization': "Bearer <API KEY>",
};
try {
// Making a POST request to an external API
const response = await axios.post(externalApiUrl, requestBody, { headers: requestHeaders });
// Sending the data back as response
res.status(200).json(response.data);
} catch (error) {
// Handling any errors
console.error('Error fetching external API', error);
res.status(error.response ? error.response.status : 500).json({ error: 'Failed to fetch data' });
}
}
Attached screen shot of the javascript console.
