Блог

Я настроил свою среду ретрансляции следующим образом:

 // createRelayEnvironment.ts

let relayEnvironment

export default function initEnvironment({ records }: EnvProps) {
    // Create a network layer from the fetch function
    const network = Network.create(fetchQuery)

    const store = new Store(new RecordSource(records || {}))

    // Make sure to create a new Relay environment for every server-side request so that data
    // isn't shared between connections
    if (!(process as any).browser) {
        return new Environment({
            network,
            store
        })
    }

    // reuse Relay environment on client-side
    if (!relayEnvironment) {
        relayEnvironment = new Environment({
            network,
            store
        })
    }

    return relayEnvironment
}
 

и для извлечения данных:

 class WithData extends React.Component {
        environment: Environment

        constructor(props: any) {
            super(props)
            this.environment = initEnvironment({
                records: props.queryRecords
            })
        }


        static async getInitialProps(ctx) {
            let composedInitialProps = {}
            if (ComposedComponent.getInitialProps) {
                composedInitialProps = await ComposedComponent.getInitialProps(ctx)
            }

            let queryProps = {}
            let queryRecords = {}

            const environment = initEnvironment({ records: {} })

            if (options.query) {
                const variables = options.mapProps ? options.mapProps() : {}
here
                queryProps = await fetchQuery(environment, options.query, variables)

                queryRecords = environment.getStore().getSource().toJSON()
            }

            return {
                ...ctx.query, // query info from next-router. E.g "slug"
                ...composedInitialProps,
                ...queryProps,
                queryRecords
            }
        }

        render() {
            const relay = {
                environment: this.environment
            }

            return (
                <ReactRelayContext.Provider value={{ environment: this.environment }}>
                    <ComposedComponent {...(this.props as P)} {...{ relay }} />
                </ReactRelayContext.Provider>
            )
        }
    }
}
 

Я получаю следующую ошибку:

 Invariant Violation: RelayContext: Expected `context.relay` to be an object conforming to the `RelayContext` interface, got `[object Object]`.
 

Это происходит с NextJS 11 и Relay v6.0.0. На версии 5.0.0 он работал нормально. Это довольно старые версии, но я пытаюсь обновить.

Из просмотра исходного кода это говорит о том, что среда Relay не является правильным форматом, но я не понимаю, как это может быть так, поскольку я просто следую инструкциям по инициализации документа

Есть ли что-то простое, что я делаю неправильно?

В конце концов я выяснил, что было причиной этого. Проверка, которая не удалась, была этой строкой в исходном коде Relay.

Когда я добавил пустой объект для переменных, например:

 render() {
            const relay = {
                environment: this.environment
            }

            return (
                <ReactRelayContext.Provider value={{ environment: this.environment, variables: {}}>
                    <ComposedComponent {...(this.props as P)} {...{ relay }} />
                </ReactRelayContext.Provider>
            )
        }
 

это сработало.

Недостатком является то, что теперь не выполняется проверка машинописного текста. Но я замечаю, что в версии 7 проверка в исходном коде теперь прошла. Итак, для меня решением было перейти на версию 7 и удалить переменные.