Как я могу прочитать предварительно выбранные данные на стороне сервера с помощью машинописного клиента? - PullRequest
Новая
       16

Как я могу прочитать предварительно выбранные данные на стороне сервера с помощью машинописного клиента?

1 голос
/ 30 мая 2019

Я использую приведенную ниже функцию для возврата исходной серверной разметки и данных в случае отсутствия поддержки javascript: 

    export const serverRender = async () => {
        const { port, host } = config;
        const resp = await 
    axios.get(`http://${host}:${port}/testData.json`);

        const initialData = resp.data;
        return {
            initialMarkup: ReactDOMServer.renderToString(<App initialData={initialData} />),
            initialData,
        };
    };

Я передаю эти данные в свой шаблон следующим образом (подробности неэто важно): 

    app.setViewEngine("pug");
    app.use(express.static(path.join(__dirname, "../public")));
    app.use(express.static(path.join(__dirname, "../assets")));
    app.enableCors();
    await app.listen(PORT, () => {
        console.log(`Nest App listening on port ${PORT}`);
    });

В моем шаблоне я использую интерполяцию pug для чтения initialData в window объект в JavaScript (window.initialData = #{initialData}).Если бы мой клиент был клиентом javascript, я мог бы читать из объекта window, например, так: window.initialData, но Typescript этого не допускает.

Мой вопрос заключается в том, как лучше всего пройти предварительную проверку.извлекать данные и передавать их на клиентскую сторону?То есть.поэтому я могу сделать что-то вроде этого при рендеринге клиента: 

    /* somehow grab pre-fetched data */
    ReactDOM.hydrate(<App />, document.getElementById("root")); // entry point for webpack

Я не говорю, что это лучший способ (это еще одна причина, почему я задаю этот вопрос), но в прошломдля небольших чистых проектов javascript я назначил данные window, как указано выше, а затем при рендеринге моего клиента react я сделал что-то вроде этого: 

    const initialData = window.initialData;
    ReactDOM.hydrate(<App initialData={initialData} />, document.getElementById("root")); // entry point for webpack

Это неfly in Typescript

N / a

Сообщение об ошибке для случая window: Property 'initialData' does not exist on type 'Window'

Но я все равно хочу найти какой-то другой способ.

1 Ответ

2 голосов
/ 31 мая 2019

Объявите, как выглядит глобальный объект окна с вашим пользовательским значением initialData: 

declare global {
    interface Window { 
        initialData: any; 
    }
}

Как только вы объявите это, тогда: 

const initialData = window.initialData;

должно работать.

...