Packages
potionx
0.2.11
0.8.15
0.8.14
0.8.13
0.8.12
0.8.11
0.8.10
0.8.9
0.8.8
0.8.7
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.2
0.7.1
0.7.0
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.3
0.5.2
0.5.1
0.5.0
0.4.16
0.4.15
0.4.14
0.4.13
0.4.12
0.4.11
0.4.10
0.4.9
0.4.8
0.4.7
0.4.6
0.4.5
0.4.4
0.4.3
0.4.2
0.4.1
0.4.0
0.3.0
0.2.18
0.2.17
0.2.16
0.2.15
0.2.14
0.2.13
0.2.12
0.2.11
0.2.10
0.2.9
0.2.8
0.2.7
0.2.6
0.2.5
0.2.4
0.2.3
0.2.2
0.2.1
0.1.1
0.1.0
Potionx is a set of generators and functions that speeds up the process of setting up and deploying a full-stack application that uses Elixir with GraphQL for the server-side component and Vue for the frontend component.
Current section
Files
Jump to
Current section
Files
priv/templates/potion.gen.gql_for_model/RouteList.tsx
import { computed, defineComponent } from 'vue'
import { <%= model_name %>Edge } from "shared/types";
import { ModelTable, ModelTableProps } from '@potionapps/ui'
import { useQuery } from "@urql/vue";
import collection from 'shared/models/<%= context_name %>/<%= model_name %>/<%= model_name_graphql_case %>Collection.gql.ts'
import schema from 'shared/models/<%= context_name %>/<%= model_name %>/<%= model_name_graphql_case %>.json'
export default defineComponent({
setup () {
const q = useQuery({
query: collection,
variables: {
first: 50
}
})
const headerLabels =
schema.map((s: any) => ({
key: s.name,
label: s.label || s.name
}))
const modelTableProps = computed<ModelTableProps>(() => {
return {
headerLabels,
rows: q.data.value?.userCollection.edges.map((edge: <%= model_name %>Edge) => edge.node) || []
}
})
return () => {
return <ModelTable
{...modelTableProps.value}
/>
}
}
})