Migrate a full page between spaces

Technical Questions
1

Hi everyone,

I’m working on a project where I need to clone a whole page from one space to another. I’m using the Content API to fetch the complete data from a page. Using the GraphQL explorer, I successfully pull the page name and its content.

After retrieving the data, I use the Write API to create a new page in the target space with the same name. However, while a new entry is created with the correct name, the content does not get transferred and the page remains empty.

I’m wondering if there might be a name conversion issue. I assumed that the components would have the same names, so the data object from the Content API would work directly with the Write API.

I know this can be done manually, but I am looking for a programmatic alternative. Has anyone encountered a similar issue or have any insights on how to properly clone the page content along with the name? Any guidance or suggestions would be greatly appreciated!

Thanks in advance!

3

To programmatically clone a page from one space to another using the Content API for fetching data and the Write API for creating new entries, follow these steps:

Step-by-Step Approach

  1. Fetch the Page Data
    Use the Content API to fetch the complete data of the page you want to clone.

    import { builder } from '@builder.io/sdk';

builder.init('YOUR_PUBLIC_API_KEY');

// Fetch the page data
const fetchPageData = async (urlPath) => {
  return await builder.get('page', {
    userAttributes: { urlPath: urlPath }
  }).toPromise();
};

  2. Clone the Page in the New Space
    Use the Write API to create a new page entry in the target space with the fetched data. Make sure you include the content blocks in the data field.

    import axios from 'axios';

const clonePage = async (pageData, targetSpaceAPIKey) => {
  const { data } = pageData;
  const postData = {
    name: data.title || 'Cloned Page',
    data: {
      ...data, // Spread the content data to include blocks and other attributes
    },
  };

  const response = await axios.post(
    'https://builder.io/api/v1/write/page', 
    postData, 
    {
      headers: {
        'Authorization': `Bearer ${targetSpaceAPIKey}`,
        'Content-Type': 'application/json',
      },
    }
  );

  return response.data;
};

// Example usage
(async () => {
  const pageData = await fetchPageData('/source-page-url');
  const result = await clonePage(pageData, 'YOUR_TARGET_SPACE_PRIVATE_API_KEY');
  console.log(result);
})();

  3. Ensure the Model is the Same in Both Spaces
    Make sure that any custom models used in the source space are also present in the target space. If they differ, you may have to create or update the models in the target space before copying the content.

Tips and Considerations

  • Field Names: Ensure that the field names and their types match in both spaces. If there are custom components, make sure they are registered in both spaces.
  • Dependencies: Handle any dependencies such as referenced data models or symbols.

Example Usage and Debugging

If there are issues with content not appearing or fields missing, log out the exact payload and responses to debug field mappings and content structure.

For more detailed information, please refer to these documentation links:

By using the above methods and ensuring that models and dependencies match, you should be able to successfully clone pages programmatically between spaces in Builder.io.