Возможно ли иметь динамические компоненты React на странице Static Gatsby? - PullRequest
0 голосов
/ 16 апреля 2019

Проблема: Поэтому я пытаюсь создать в основном статическую страницу Гэтсби, но с одним исключением, находящимся вверху справа, будет динамический компонент, который изменяется в зависимости от того, вошел ли пользователь в систему или нет. Проверка, вошел ли пользователь в систему или нет, должна выполняться динамически, потому что я использую HTTP-куки, и если у них их нет, он должен сделать REST-вызовы в службу для нового. Причина, по которой я это делаю, заключается в том, что сайт в основном статичен, и только этот небольшой элемент прогресса входа в систему в верхнем правом углу является единственным динамическим компонентом. Это возможно?

Вещи, которые я пробовал: Я пытался следовать учебному пособию Гэтсби по созданию имени входа, но способ, которым они это делают, это проверить состояние и перейти на другой статический сайт в зависимости от того, вошел ли пользователь в систему или нет.

Ожидаемый результат: При загрузке страницы я бы хотел, чтобы сайт был в основном статичным для более быстрой загрузки, и потому что большая часть страницы просто отображает контент из CMS, а затем один компонент, который динамически проверяет состояние входа пользователя в систему. Поэтому компонент в правом верхнем углу должен иметь значок загрузки при загрузке страницы, а затем кнопку входа в систему, если пользователь отсутствует, или информация о пользователе, если они есть.

1 Ответ

0 голосов
/ 17 апреля 2019

Вам следует обратиться к Apollo за выполнением запросов на стороне клиента: https://www.apollographql.com/

Здесь приведена демонстрация использования Apollo с Gatsby https://youtu.be/wNUg1jpj9T0?t=1240

По сути, вы можете заключить компонент React вApolloProvider, который может получить доступ к внешнему API.

Apollo использует GraphQL, но вы можете использовать библиотеку наподобие apollo-link-rest для запроса конечной точки REST.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...