Веб-сборка с безголовым контентом | API контента GraphQL
Несмотря на возможности, которые постоянно предлагаются современными веб-браузерами, всегда существовали некоторые ограничения. Одним из них является то, что JavaScript до настоящего времени был единственным языком программирования, поддерживаемым браузерами, что, в свою очередь, заставляет разработчика использовать только или менее доступные библиотеки для некоторых конкретных задач. Конечно, для этой проблемы можно запрограммировать решения, но они будут стоить разработчику драгоценного времени и ресурсов.
Насколько гибкими были бы разработчики, если бы у них был накопленный выбор библиотек с разной направленностью, и им не нужно было бы зависеть от чего-то, что может создавать колеблющуюся производительность при компиляции в среду выполнения, что слишком по-разному с разными браузерными движками.
Веб-сборка — это то, что было в моем списке ToLearn и привлекло мое внимание при поиске проблемы, описанной выше. С такими языками программирования, как C, C++ и Rust, теперь доступен значительно больший выбор ресурсов и библиотек, и теперь можно интегрировать эти языки в веб-приложения в дополнение к JavaScript, что открывает новые возможности для онлайн-приложений. .
Имея приличное количество причин и мотивации для изучения Web Assembly, я начал углубляться в это. Поскольку Rust предлагает очень удобный компилятор с первоклассными инструментами и интегрированным пакетом, например, wasm-pack, для поддержки процесса сборки и предоставления кода веб-сборки для JavaScript.
Современные веб-приложения — это их быстрая разработка и меньшее количество внутреннего кода. Помня об этом подходе, я пришел к идее использования Headless-CMS, в нашем случае да, это Contentful.
Итак, теперь вы получили общее представление о рабочем процессе, который я реализовал здесь. Но для большей точности позвольте мне уточнить.
Во-первых, во-первых,
Первым и важным препятствием было найти что-то, что можно было бы легко скомпилировать в Web Assembly и использовать для выполнения запросов к Contentful и получения ответов JSON. Разговор об ответах JSON приближает мой подход к GraphQL Content API. После небольшого исследования я нашел кое-что, что я искал, и это был graphql_clientпакет Rust.
Настройка новой среды Cargo может быть трудной для одного или другого. Позвольте мне упростить для вас:
1. Настраиваем новый грузовой проект, в моем случае это webr (Web Assembly-Rust).
2. Поскольку весь проект вращается вокруг wasm-pack и graphql_client,следующим шагом будет загрузка wasm-pack (Установка) и оснащение вашего cargo.toml необходимыми крейтами.
graphql_client = { version = "0.11.0", features = ["reqwest"] }
wasm-bindgen = "0.2"
Давайте подготовим наш серверRusty,
- Поскольку я предполагаю, что теперь у вас есть готовый фон Rust, мы будем делать запросы к Contentful с помощью graphql_client. Для начала нам понадобятся 2 важных файла: book_collection.graphql и schema.json.
2. Ответы играют ключевую роль при работе с веб-приложениями и API. При рендеринге ответов нам потребуется структура в Rust, в которой хранится каждая отдельная запись, которую, в свою очередь, можно гибко и модульно использовать во внешнем интерфейсе. (Подробнее здесь)
#[derive(GraphQLQuery)] #[graphql (schema_path = "schema.json", query_path = "src/book_collection.graphql", response_derives = "Debug")] struct BookCollection;
- Точность и достоверность ответов можно обеспечить во время компиляции с помощью файла schema.json.
- Чтобы загрузить схему, у вас есть несколько вариантов. Я лично позволил apollo выполнить эту задачу за меня, просто написав это на свой локальный терминал:
npx apollo schema:download — endpoint=https://graphql.contentful.com/content/v1/spaces/{CONTENTFUL_SPACE_ID} — header=”Authorization: Bearer {CONTENTFUL_ACCESS_TOKEN}” — header=”Content-Type: application/json”schema.json
3. Теперь serde'sderive сгенерировал модуль с именем book_collection в этом примере, и этот модуль содержит все определения структуры и перечисления, необходимые для десериализации ответа на этот запрос. Модуль также содержит структуру с именем Variables, представляющую переменные, ожидаемые запросом.
let variables=book_collection::Variables;
4. Reqwest crate отлично справился со сборкой клиента с соответствующими заголовками.
reqwest = {version="0.11.1", features = ["json"]}
Не забудьте получить токен доступа и идентификатор пространства от Contentful. (Как его получить?)
let client = Client::builder()
.default_headers(std::iter::once((
reqwest::header::AUTHORIZATION,
reqwest::header::HeaderValue::from_str(&format!("Bearer {}", contentful_access_token))
.unwrap()
)).collect(),
.build()
.unwrap();
5. Теперь давайте просто пообщаемся с Contentful, собрав все важные вещи, которые мы собрали до сих пор.
let response_body = post_graphql::<BookCollection,_>(&client, graphql_url, variables).await.unwrap();
Йохо! Статус 200 ОК :) Я вижу, ты улыбаешься!
Как скомпилировать все это в веб-сборку?
А теперь вот что в этой статье о компиляции этой асинхронной функции, ожидающей будущего (Promise в терминах JavaScript), для веб-сборки, делающей Rust Background доступным для index.html всего с 2 строками JavaScript.
Вы помните wasm_pack, теперь он берет на себя эту работу. Можно легко скомпилировать асинхронные функции, ожидающие Future, в веб-сборку с помощью wasm-bindgen-futurescrate. Этот ящик содержит утилиты для превращения ржавчины в JavaScript Promise .
#[wasm_bindgen(start)]
pub async fn run() {
/*
*Code to Contentful comes here.
*/
}
Теперь позвольте wasm-pack скомпилировать ваш код Rust,
wasm-pack build --target=web
и вы увидите, что каталог pkg автоматически появился вверху всех со всеми необходимыми файлами JavaScript и TypeScript, скомпилированным wasm-pack.
Не забудьте инициировать двоичный код в index.html, чтобы увидеть умопомрачительные результаты.
Да ты сделал это!
Ответы также теперь могут быть легко отображены. Я использовал web-sys , чтобы иметь возможность взаимодействовать со всеми стандартными методами веб-платформы.
Моя коллекция книг готова к использованию.
Я надеюсь, что эта статья помогла вам в чем-то. Код можно найти здесь. Я также хотел бы услышать некоторые отзывы, чтобы в следующий раз я мог стать лучше и Счастливого Ржавления :).
Не стесняйтесь обратиться ко мне:
