A list of utilities for a Decoupled integrations
Import the syncDrupalPreviewRoutes helper at app/root.tsx
import { syncDrupalPreviewRoutes } from "drupal-decoupled";Make sure your loader returns the current environment value
export const loader = async ({ context }: LoaderFunctionArgs ) => {
// Provide a variable to define the environment
const environment = context.cloudflare.env.ENVIRONMENT
return json(
{
environment,
},
{ status: 200 }
);
};NOTE: This example is using Cloudflare and taking advantage of Environemt Settings to define "environment" key/value, that is why we are using the
context.cloudflare.env.ENVIRONMENTobject to obtain the value and pass it from Server to Client.
Upate your App function
export default function App() {
// read environment from loader
const { environment } = useLoaderData<typeof loader>();
// use the useNavigation hook from @remix-run/react
const navigation = useNavigation();
// check if environment is preview and navigation.state is loading
// to call syncDrupalPreviewRoutes
if (environment === "preview" && navigation.state === "loading") {
syncDrupalPreviewRoutes(navigation.location.pathname);
}
return (
<>
<Outlet />
</>
);
}For a fully functional example visit any of those repositories:
Development sponsored by Octahedroid