A Nais Console post #67
Conversation
| ```svelte | ||
| <script lang="ts"> | ||
| import { graphql } from '$houdini'; | ||
| import { Skeleton } from '@nais/ds-svelte-community'; | ||
|
|
||
| // Define a GraphQL query to fetch team information | ||
| const teamInfo = graphql(` | ||
| query TeamInfo($team: Slug!) @load { | ||
| team(slug: $team) @loading { | ||
| purpose @loading | ||
| } | ||
| } | ||
| `); | ||
| </script> | ||
|
|
||
| <div> | ||
| <!-- Display team purpose or a loading skeleton while data is being fetched --> | ||
| {#if $teamInfo.data} | ||
| {#if $teamInfo.data.team.purpose} | ||
| <p>Purpose: {$teamInfo.data.team.purpose}</p> | ||
| {:else} | ||
| <Skeleton variant="text" /> | ||
| {/if} | ||
| {/if} | ||
| </div> | ||
| ``` | ||
|
|
||
| This simplified example demonstrates how Svelte and Houdini work together to fetch and display data. The `graphql` function defines a query, and the `$teamInfo.data` store automatically updates when the query resolves. The `Skeleton` component provides a loading state while the data is being fetched. | ||
|
|
||
| This example demonstrates how Houdini simplifies GraphQL queries and state management in the frontend. By leveraging Svelte’s reactivity and Houdini’s tools, the team can deliver a seamless and responsive user experience. |
There was a problem hiding this comment.
Kræsjer denne delen litt mer resten av artikkelen? Handler vel mer om UI etc, ikke hvordan progge i svelte?
There was a problem hiding this comment.
Enig med @thokra-nav, dette passer ikke inn med resten. Jeg tenker denne delen kan ta litt overordnet om arkitekturen og hvilke teknologier, men eksempler og dypdykk kan heller vente til en (eventuell) egen blogpost med samme tittel.
There was a problem hiding this comment.
Ja, enig. Ser at det blir litt malplassert sånn som det står nå! Kanskje få litt mer kjøtt på bena om arkitektur uten å gå inn i koden.
Co-authored-by: Thomas Krampl <[email protected]>
|
|
||
| However, as the platform has grown to support hundreds of teams and nearly 2,000 applications, we’ve seen a diverse range of users with varying backgrounds and needs. There’s also an expectation for a more unified and streamlined user experience compared to when we started building Nais nearly a decade ago. | ||
|
|
||
|  |
There was a problem hiding this comment.
Kunne vi fått inn en pause-knapp for animasjoner? Personlig syns det er distraherende når jeg skal lese noe (kanskje ironisk med hvor mye jeg bruker det i Slack).
There was a problem hiding this comment.
Hvordan pauser man en gif? 🤔
There was a problem hiding this comment.
Mange bruker VP8/VP9 i stedetfor gif for å redusere størrelse og støtte f.eks. pause (siden det er video). Men trenger da å bygge fallback etc
Co-authored-by: Kyrre Havik <[email protected]>
4 participants
By popular demand ✨ En blogpost om Nais Console ✨