Potential issues with code accessing the CMS

With the latest CMS upgrade, code components and overrides that have been built on Framer internals might have stopped working.

These are internal props that have been updated, and are likely to do so again. In earlier versions of Framer, the collection variable was an Array. This is not the case anymore, and the properties provided by the collection variable is a private implementation detail that is likely to change any time. These updates are necessary to regularly support new features, for example larger collections. Here are a few examples of what is not supported.


❌ You cannot access collections with a code override

import type { ComponentType } from "react"

export function withCollection(Component): ComponentType {
    return (props) => {
        // The variable below has changed and is NOT supported.
        const collection = props.children.props.query.from.data

        return <Component {...props} />
    }
}


❌ You cannot access collections with a code component

import { Fragment } from "react"
import { addPropertyControls, ControlType } from "framer"

export default function Component({ children }) {
    // The variable below has changed and is NOT supported.
    const collection = children.props.children.props.query.from.data

    return <Fragment>{children}</Fragment>
}

addPropertyControls(Component, {
    children: {
        type: ControlType.ComponentInstance,
    },
})


❌ You cannot access collections with a module import

// The variable below has changed and is NOT supported.
import collection from "../collection/qE6RTvUxt"


Pagination with infinite scrolling and load more is coming soon. Framer will eventually provide a first class API to access the CMS from code, but we don’t support this yet.