Hi Maddy,
Sorry for my very late reply.
I changed the preview url for the page model now to our current live site: dev.uwassistent.nl. Now it only shows a lot of time error with loading / slow reaction when I try to edit an element on a page.
I didn’t saw an option to add an attachment in this reply, so below will be the code from our frontend and backend of builder integration.
The problem is only with our content in the model called page. Those pages are rendered without the js functions and images. The content in the model called landingpages are rendered correctly.
Frontend 2 files:
import React from 'react';
import { useLocation } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import ErrorQuery from 'core/ErrorQuery/ErrorQuery';
import Loader from 'core/Loader/Loader';
import RawHtml from 'core/RawHtml/RawHtml';
import { GET_BUILDER_IO_PAGE } from './api/query';
const BuilderPage = () => {
// Data type from query
const dataType = 'builderIo';
const location = useLocation();
const builderUrl = location.pathname;
const { data, loading, error } = useQuery(GET_BUILDER_IO_PAGE, {
variables: { builderUrl },
fetchPolicy: 'no-cache',
});
const dataFromRequest = data?.[dataType] || '';
// If graphQL returned error
if (error) return <ErrorQuery error={error} />;
return (
<div className="builder">
{loading && <Loader />}
{!loading && (
<div>
<RawHtml>{dataFromRequest}</RawHtml>
</div>
)}
</div>
);
};
export default BuilderPage;
/// Second file frontend:
import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_BUILDER_IO_PAGE } from '../BuilderPage/api/query';
import { builderIoContentRoutes } from '../../config/builderIoContentRoutes';
import ErrorQuery from 'core/ErrorQuery/ErrorQuery';
import RawHtml from 'core/RawHtml/RawHtml';
import Loader from 'core/Loader/Loader';
const Home = () => {
// Data type from query
const dataType = 'builderIo';
const builderUrl = `/${builderIoContentRoutes[0]}`;
const { data, loading, error } = useQuery(GET_BUILDER_IO_PAGE, {
variables: { builderUrl },
fetchPolicy: 'no-cache',
});
const dataFromRequest = data?.[dataType] || '';
// If graphQL returned error
if (error) return <ErrorQuery error={error} />;
return (
<div className="builder">
{loading && <Loader />}
{!loading && (
<div>
<RawHtml>{dataFromRequest}</RawHtml>
</div>
)}
</div>
);
};
export default Home;
// Backend
import dotenv from 'dotenv';
import { GraphQLError } from 'graphql';
import { STATUS_200 } from '../dicts/server-statuses-dict.mjs';
import builderIoService, { BUILDER_LANDING_TYPE } from '../services/core/builder-io-service.mjs';
import { logger } from '../config/logger.config.mjs';
dotenv.config();
/**
* Landing controller
*/
const LandingController = {
// GET landing-builder
landingBuilder: async (request, res) => {
let html = '';
const builderUrl = request.query?.url;
try {
// Get page from builder.io
html = await builderIoService({ builderUrl, builderType: BUILDER_LANDING_TYPE });
} catch (error) {
logger.log({
level: 'error',
message: `builderUrl: ${error.message}`
});
throw new GraphQLError(error.message);
}
res.status(STATUS_200).type('text/html');
return res.send(html);
}
};
export default LandingController;
// Second file
import dotenv from 'dotenv';
import axios from 'axios';
import { getFromRedis, putToRedis } from './redis-service.mjs';
dotenv.config();
const { BUILDER_IO_PAGE_URL, BUILDER_IO_LANDING_URL, BUILDER_IO_KEY } = process.env;
export const BUILDER_LANDING_TYPE = 'landing';
export const BUILDER_PAGE_TYPE = 'page';
export const BUILDER_KEY = 'builder';
// How many days need to keep data in cache
const CACHE_DAYS_BUILDER = 30;
const CACHE_SECONDS_BUILDER = CACHE_DAYS_BUILDER * 60 * 60 * 24;
/**
* BuilderIo service (get pages from builder.io)
*
* @param builderUrl string builder.io URL
* @param builderType string type of page (landing, page)
*/
const builderIoService = async ({ builderUrl, builderType = BUILDER_PAGE_TYPE }) => {
let html = null;
const builderIoParams = `?apiKey=${BUILDER_IO_KEY}&url=${builderUrl}`;
let builderLink = `${BUILDER_IO_PAGE_URL}${builderIoParams}`;
if (builderType === BUILDER_LANDING_TYPE) builderLink = `${BUILDER_IO_LANDING_URL}${builderIoParams}`;
try {
// Get page from cache
const htmlData = await getFromRedis({ prefix: BUILDER_KEY, key: builderUrl });
html = htmlData.value;
// If don't get from cache then get page from builder.io
if (!html) {
const response = await axios.get(builderLink);
html = response?.data?.data?.html;
// Put page to cache
if (html) await putToRedis({ prefix: BUILDER_KEY, key: builderUrl, value: html, options: { EX: CACHE_SECONDS_BUILDER } });
}
return html;
} catch (error) {
throw new Error(error.message);
}
};
export default builderIoService;
When I try to edit the homepage I only get errors and troubleshoot warning since I adjust the preview. See page:
Can you look into the code I sent and see how we can fix our layout erros + integrate the page content model. So the pages that are listed there are rendered correctly + have a working Javascript functionallity. So the slider / layout and other functions are working again.
Thanks in advance.
Kind regards,
Geert
