😂 Как отлавливать запросы к GraphQL и строить схему

GraphQL часто прячут за фронтом, но если отловить его запросы, можно восстановить схему и понять, какие данные реально доступны.

1️⃣ Ищем запросы

В DevTools → Network фильтруем по graphql или POST.
Чаще всего endpoint — /graphql или /api.

2️⃣ Смотрим тело запроса

Открываем вкладку Payload. Там будет поле query:

query {
  user(id: "1") {
    name
    email
  }
}

3️⃣ Восстанавливаем схему

Берем несколько таких запросов и запускаем GraphQL Voyager или graphql-inspector.
Они помогут превратить сырые запросы в визуальную схему.

4️⃣ Автоматизация

Если нужно вытянуть всё:

npm install -g get-graphql-schema
get-graphql-schema https://example.com/graphql > schema.graphql

5️⃣ Бонус

Если сервер не закрыт introspection-запросами, можно отправить:

{
  __schema {
    types {
      name
      fields { name }
    }
  }
}

И получить полную схему официальным способом.

Перехватив всего пару запросов, можно понять структуру GraphQL API, а иногда и найти забытые поля (типа isAdmin 🙃).

🐸 Библиотека фронтендера

#буст

К - Команда 😴

🐸 Библиотека фронтендера

#развлекалово

📌 Интерактивная шпаргалка для веб-разработчика

Здесь есть подсказки по HTML, CSS, JavaScript, PHP, jQuery и SEO — всё разложено по категориям и с примерами.

🔗 Ссылка

🐸 Библиотека фронтендера

#буст

🔥 Что нового в Svelte

Фреймворк снова радует свежими апдейтами:

➡️ Svelte 5.38.0

Теперь в шаблонах можно использовать await прямо внутри @const -объявлений. Асинхронщина стала ещё удобнее.

➡️ Svelte CLI 0.9.0

Флаги --no-preconditions ушли в прошлое. На смену пришёл --no-git-check, позволяющий работать без чистой git-директории.

➡️ SvelteKit

— Появилась поддержка OpenTelemetry через instrumentation.server.ts → больше контроля и прозрачности при мониторинге.

— Добавили возможность использовать Deno как пакетный менеджер → гибкость и лёгкая настройка окружения.

⚡️ Больше инструментов для масштабных проектов, лучшее наблюдение за системой и удобнее рабочие процессы.

🔗 Источник

🐸 Библиотека фронтендера

#свежак

📌 Команда дня: оптимизация SVG прямо из CLI

SVG из Figma или Illustrator часто весят в несколько раз больше из-за мусорных тегов и метаданных. Это замедляет загрузку и раздувает бандл. Решение простое — оптимизировать иконки через CLI:

npx svgo logo.svg -o logo.min.svg

➡️ svgo — инструмент для чистки и сжатия SVG

➡️ -o logo.min.svg — сохранить результат в новый файл

💡 После прогонки иконка выглядит так же, но вес может упасть на 30–70%.

Можно оптимизировать сразу папку:

npx svgo -f icons/ -o icons-optimized/

Используйте флаг --multipass для более глубокого сжатия

🐸 Библиотека фронтендера

#буст