Migrate instrument page to use setup syntax and new graphql style

client/src/__generated__/gql.ts

@@ -34,6 +34,8 @@ const documents = {
     "\n        mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n          updateContentBookmark(input: $input) {\n            success\n          }\n        }\n      ": types.UpdateContentBookmarkDocument,
     "\n    query ChapterQuery($id: ID!) {\n      chapter(id: $id) {\n        path\n      }\n    }\n  ": types.ChapterQueryDocument,
     "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  ": types.ContentBlockQueryDocument,
+    "\n  fragment InstrumentParts on InstrumentNode {\n    id\n    title\n    intro\n    slug\n    language\n    bookmarks {\n      uuid\n      note {\n        id\n        text\n      }\n    }\n    type {\n      id\n      name\n      category {\n        id\n        name\n        foreground\n        background\n      }\n      type\n    }\n    contents\n  }\n": types.InstrumentPartsFragmentDoc,
+    "\n    query InstrumentQuery($slug: String!) {\n      instrument(slug: $slug) {\n        ...InstrumentParts\n      }\n    }\n  ": types.InstrumentQueryDocument,
     "\n        query MeLanguage {\n          me {\n            language @client\n          }\n        }\n      ": types.MeLanguageDocument,
     "\n    query ModuleSnapshotsQuery($slug: String!) {\n      module(slug: $slug) {\n        id\n        title\n        metaTitle\n        slug\n        topic {\n          title\n        }\n        snapshots {\n          ...SnapshotDetailsFragment\n        }\n      }\n    }\n  ": types.ModuleSnapshotsQueryDocument,
     "\n  query ModuleSolutions($slug: String) {\n    module(slug: $slug) {\n      solutionsEnabled\n      slug\n    }\n  }\n": types.ModuleSolutionsDocument,
@@ -137,6 +139,14 @@ export function graphql(source: "\n    query ChapterQuery($id: ID!) {\n      cha
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "): (typeof documents)["\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment InstrumentParts on InstrumentNode {\n    id\n    title\n    intro\n    slug\n    language\n    bookmarks {\n      uuid\n      note {\n        id\n        text\n      }\n    }\n    type {\n      id\n      name\n      category {\n        id\n        name\n        foreground\n        background\n      }\n      type\n    }\n    contents\n  }\n"): (typeof documents)["\n  fragment InstrumentParts on InstrumentNode {\n    id\n    title\n    intro\n    slug\n    language\n    bookmarks {\n      uuid\n      note {\n        id\n        text\n      }\n    }\n    type {\n      id\n      name\n      category {\n        id\n        name\n        foreground\n        background\n      }\n      type\n    }\n    contents\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    query InstrumentQuery($slug: String!) {\n      instrument(slug: $slug) {\n        ...InstrumentParts\n      }\n    }\n  "): (typeof documents)["\n    query InstrumentQuery($slug: String!) {\n      instrument(slug: $slug) {\n        ...InstrumentParts\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

client/src/__generated__/graphql.ts

@@ -2782,6 +2782,18 @@ export type ContentBlockQueryQueryVariables = Exact<{
 
 export type ContentBlockQueryQuery = { __typename?: 'Query', contentBlock?: { __typename?: 'ContentBlockNode', path?: string | null } | null };
 
+export type InstrumentPartsFragment = { __typename?: 'InstrumentNode', id: string, title: string, intro: string, slug: string, language?: string | null, contents?: any | null, bookmarks?: Array<{ __typename?: 'InstrumentBookmarkNode', uuid?: any | null, note?: { __typename?: 'NoteNode', id: string, text: string } | null } | null> | null, type?: { __typename?: 'InstrumentTypeNode', id: string, name: string, type: string, category?: { __typename?: 'InstrumentCategoryNode', id: string, name: string, foreground: string, background: string } | null } | null } & { ' $fragmentName'?: 'InstrumentPartsFragment' };
+
+export type InstrumentQueryQueryVariables = Exact<{
+  slug: Scalars['String']['input'];
+}>;
+
+
+export type InstrumentQueryQuery = { __typename?: 'Query', instrument?: (
+    { __typename?: 'InstrumentNode' }
+    & { ' $fragmentRefs'?: { 'InstrumentPartsFragment': InstrumentPartsFragment } }
+  ) | null };
+
 export type MeLanguageQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -2811,6 +2823,7 @@ export const ModuleLevelFragmentFragmentDoc = {"kind":"Document","definitions":[
 export const SnapshotListItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shared"}}]}}]} as unknown as DocumentNode<SnapshotListItemFragment, unknown>;
 export const SnapshotTitleFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotTitleFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotTitleFragmentFragment, unknown>;
 export const SnapshotDetailsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotDetailsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}}]}}]} as unknown as DocumentNode<SnapshotDetailsFragmentFragment, unknown>;
+export const InstrumentPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]} as unknown as DocumentNode<InstrumentPartsFragment, unknown>;
 export const AddHighlightDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddHighlight"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddHighlightInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addHighlight"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlight"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"contentBlock"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<AddHighlightMutation, AddHighlightMutationVariables>;
 export const LanguageQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LanguageQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}}]} as unknown as DocumentNode<LanguageQueryQuery, LanguageQueryQueryVariables>;
 export const SetLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SetLanguage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"language"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setLanguage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"language"},"value":{"kind":"Variable","name":{"kind":"Name","value":"language"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}}]}}]}}]} as unknown as DocumentNode<SetLanguageMutation, SetLanguageMutationVariables>;
@@ -2825,6 +2838,7 @@ export const UpdateInstrumentBookmarkDocument = {"kind":"Document","definitions"
 export const UpdateContentBookmarkDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateContentBookmark"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateContentBookmarkInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateContentBookmark"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"success"}}]}}]}}]} as unknown as DocumentNode<UpdateContentBookmarkMutation, UpdateContentBookmarkMutationVariables>;
 export const ChapterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChapterQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chapter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ChapterQueryQuery, ChapterQueryQueryVariables>;
 export const ContentBlockQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ContentBlockQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contentBlock"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ContentBlockQueryQuery, ContentBlockQueryQueryVariables>;
+export const InstrumentQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"InstrumentQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"instrument"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"InstrumentParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]} as unknown as DocumentNode<InstrumentQueryQuery, InstrumentQueryQueryVariables>;
 export const MeLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MeLanguage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}}]} as unknown as DocumentNode<MeLanguageQuery, MeLanguageQueryVariables>;
 export const ModuleSnapshotsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSnapshotsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"metaTitle"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"topic"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"snapshots"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SnapshotDetailsFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotDetailsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}}]}}]} as unknown as DocumentNode<ModuleSnapshotsQueryQuery, ModuleSnapshotsQueryQueryVariables>;
 export const ModuleSolutionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSolutions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"solutionsEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleSolutionsQuery, ModuleSolutionsQueryVariables>;

client/src/graphql/gql/fragments/instrumentParts.gql

@@ -1,4 +1,4 @@
-fragment InstrumentParts on InstrumentNode {
+fragment LegacyInstrumentParts on InstrumentNode {
   id
   title
   intro

client/src/graphql/gql/queries/instrumentQuery.gql

@@ -1,6 +1,6 @@
 #import "../fragments/instrumentParts.gql"
 query InstrumentQuery($slug: String!) {
   instrument(slug: $slug) {
-    ...InstrumentParts
+    ...LegacyInstrumentParts
   }
 }

client/src/graphql/gql/queries/instrumentQueryById.gql

@@ -1,6 +1,6 @@
 #import "../fragments/instrumentParts.gql"
 query InstrumentQueryById($id: ID!) {
   instrument(id: $id) {
-    ...InstrumentParts
+    ...LegacyInstrumentParts
   }
 }

client/src/pages/instrument.vue

@@ -26,34 +26,59 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
-
 import { defineAsyncComponent } from 'vue';
+import { useRoute } from 'vue-router';
+import { graphql } from '@/__generated__';
+import { useQuery } from '@vue/apollo-composable';
+import { computed } from '@vue/reactivity';
+import { InstrumentNode } from '@/__generated__/graphql';
+
 const ContentComponent = defineAsyncComponent(() => import('@/components/content-blocks/ContentComponent.vue'));
+graphql(`
+  fragment InstrumentParts on InstrumentNode {
+    id
+    title
+    intro
+    slug
+    language
+    bookmarks {
+      uuid
+      note {
+        id
+        text
+      }
+    }
+    type {
+      id
+      name
+      category {
+        id
+        name
+        foreground
+        background
+      }
+      type
+    }
+    contents
+  }
+`);
 
-export default {
+const route = useRoute();
-  apollo: {
-    instrument() {
-      return {
-        query: INSTRUMENT_QUERY,
-        variables: {
-          slug: this.$route.params.slug,
-        },
-      };
-    },
-  },
 
-  components: {
+const { result } = useQuery(
-    ContentComponent,
+  graphql(`
-  },
+    query InstrumentQuery($slug: String!) {
-
+      instrument(slug: $slug) {
-  data() {
+        ...InstrumentParts
-    return {
+      }
-      instrument: {},
+    }
-    };
+  `),
-  },
+  {
-};
+    slug: route.params.slug as string,
+  }
+);
+const instrument = computed(() => result.value?.instrument as InstrumentNode);
 </script>
 
 <style scoped lang="scss">