Top Tips

Vue 3 Composition API (setup() or <script setup>)

Running queries (without blocking) / switching from Apollo Smart Queries

1. Ensure graphql file for query inside the appropriate graphql/queries folder.
2. yarn codegen

In component:

<script setup lang="ts">
import { use<queryName>Query } from '@/graphql/codegen/operations`

const { result } = useHomepageUpcomingProductionsQuery(); // NB: result is a ref. Access the data using result.value.data

...

Example https://github.com/BristolSTA/uobtheatre-web/blob/feat/nuxt3/pages/index.vue#L127

Running queries on page load (blocking navigation / must be run before page load) / switching from asyncData()

1. Ensure graphql file for query inside the appropriate graphql/queries folder.
2. yarn codegen

In component:

// <script setup lang="ts">
import { <queryName>Document, <queryName>Query, <queryName>QueryVariables} from '@/graphql/codegen/operations`

const { data } = await useAsyncQuery<<queryName>Query>(
  <queryName>Document,
  { foo: 'bar' } as <queryName>QueryVariables
);
...

Example https://github.com/BristolSTA/uobtheatre-web/blob/feat/nuxt3/pages/venue/%5Bslug%5D/index.vue#L92