Fix type inputs from PR

client/src/__generated__/gql.ts

@@ -42,7 +42,7 @@ const documents = {
     "\n  fragment SchoolClassParts on SchoolClassNode {\n    id\n    name\n  }\n": types.SchoolClassPartsFragmentDoc,
     "\n  fragment UserParts on PrivateUserNode {\n    id\n    pk\n    username\n    email\n    firstName\n    lastName\n    avatarUrl\n    expiryDate\n    readOnly\n    lastModuleLevel {\n      id\n      name\n      filterAttributeType\n    }\n    lastModule {\n      id\n      slug\n    }\n    lastTopic {\n      id\n      slug\n    }\n    selectedClass {\n      id\n      readOnly\n    }\n    recentModules(orderBy: \"-visited\") {\n      edges {\n        node {\n          ...ModuleParts\n        }\n      }\n    }\n    schoolClasses {\n      ...SchoolClassParts\n    }\n  }\n": types.UserPartsFragmentDoc,
     "\n  fragment TeamParts on TeamNode {\n    name\n    code\n    id\n    members {\n      firstName\n      lastName\n      id\n      isMe\n    }\n  }\n": types.TeamPartsFragmentDoc,
-    "\nfragment WagtailImageParts on WagtailImageNode {\n    id\n    src\n    alt\n    width\n    height\n    title\n  }\n": types.WagtailImagePartsFragmentDoc,
+    "\nfragment WagtailImageParts on WagtailImageNode {\n    id\n    src\n    alt\n    width\n    height\n    title\n    srcset\n  }\n": types.WagtailImagePartsFragmentDoc,
     "\n  fragment ModuleParts on ModuleNode {\n    id\n    title\n    metaTitle\n    teaser\n    intro\n    slug\n    heroImage { ...WagtailImageParts }\n    heroSource\n    solutionsEnabled\n    highlights {\n      ...HighlightParts\n    }\n    language\n    inEditMode @client\n    level {\n      id\n      name\n    }\n    category {\n      id\n      name\n    }\n    topic {\n      slug\n      title\n    }\n    bookmark {\n      note {\n        id\n        text\n      }\n    }\n  }\n": types.ModulePartsFragmentDoc,
     "\n    query MeQuery {\n      me {\n        ...UserParts\n        team {\n          ...TeamParts\n        }\n        isTeacher\n        permissions\n        onboardingVisited\n      }\n    }\n  ": types.MeQueryDocument,
     "\n    fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n      highlights {\n        id\n      }\n    }\n  ": types.InstrumentHighlightsWithIdOnlyFragmentFragmentDoc,
@@ -195,7 +195,7 @@ export function graphql(source: "\n  fragment TeamParts on TeamNode {\n    name\
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\nfragment WagtailImageParts on WagtailImageNode {\n    id\n    src\n    alt\n    width\n    height\n    title\n  }\n"): (typeof documents)["\nfragment WagtailImageParts on WagtailImageNode {\n    id\n    src\n    alt\n    width\n    height\n    title\n  }\n"];
+export function graphql(source: "\nfragment WagtailImageParts on WagtailImageNode {\n    id\n    src\n    alt\n    width\n    height\n    title\n    srcset\n  }\n"): (typeof documents)["\nfragment WagtailImageParts on WagtailImageNode {\n    id\n    src\n    alt\n    width\n    height\n    title\n    srcset\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

client/src/components/content-blocks/ImageBlock.vue

@@ -2,7 +2,7 @@
   <wagtail-image
     :src="value.src"
     :srcset="value.srcset"
-    alt=""
+    :alt="value.alt"
     :original-height="value.height"
     :original-width="value.width"
     class="image-block"

client/src/components/modules/Module.vue

@@ -34,6 +34,7 @@
         :srcset="module.heroImage.srcset"
         :original-width="module.heroImage.width"
         :original-height="module.heroImage.height"
+        :alt="module.heroImage.alt"
       ></wagtail-image>
 
 

client/src/components/ui/WagtailImage.vue

@@ -6,7 +6,7 @@
     <img
       :src="props.src"
       :srcset="props.srcset"
-      :alt="alt"
+      :alt="props.alt"
       class="wagtail-image__image"
       :sizes="computedSizes"
       loading="eager"
@@ -16,15 +16,19 @@
     />
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 
-const props = defineProps({
+export interface Props {
-  src: String,
+  src: string;
-  alt: String(''),
+  alt?: string;
-  originalWidth: Number,
+  originalWidth: number;
-  originalHeight: Number,
+  originalHeight: number;
-  srcset: String,
+  srcset?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
 });
 
 const imgElement = ref(null);
@@ -57,7 +61,6 @@ const computedSizes = computed(() => {
   if (600 < width.value && width.value <= 1200) {
     size = '800px';
   }
-  console.log(size, width.value);
   return size;
 });
 
@@ -107,6 +110,7 @@ onBeforeUnmount(() => {
     object-position: center;
   }
 }
+
 .wagtail-image.loaded {
   background-color: white;
 }

client/src/graphql/queries.ts

@@ -99,6 +99,7 @@ fragment WagtailImageParts on WagtailImageNode {
     width
     height
     title
+    srcset
   }
 `);
 

server/books/schema/interfaces/module.py

@@ -5,7 +5,7 @@ from api.graphene_wagtail import generate_image_url
 
 class ModuleInterface(relay.Node):
     pk = graphene.Int()
-    hero_image = graphene.Field('books.schema.nodes.WagtailImageNode')
+    hero_image = graphene.Field('books.schema.nodes.WagtailImageNode', required=True)
     topic = graphene.Field('books.schema.nodes.TopicNode')
 
     @staticmethod

server/schema.graphql

@@ -108,7 +108,7 @@ type ModuleNode implements ModuleInterface {
   metaTitle: String!
   level: ModuleLevelNode
   category: ModuleCategoryNode
-  heroImage: WagtailImageNode
+  heroImage: WagtailImageNode!
 
   """e.g. 'Reuters', 'Wikipedia'"""
   heroSource: String!
@@ -140,7 +140,7 @@ interface ModuleInterface {
   """The ID of the object"""
   id: ID!
   pk: Int
-  heroImage: WagtailImageNode
+  heroImage: WagtailImageNode!
   topic: TopicNode
 }
 
@@ -153,6 +153,7 @@ type WagtailImageNode implements Node {
   id: ID!
   src: String
   alt: String
+  srcset: String
 }
 
 type TopicNode implements Node {
@@ -751,12 +752,13 @@ type ProjectNode implements Node {
   slug: String!
   objectives: String!
   appearance: String!
-  student: PublicUserNode
+  student: PublicUserNode!
   final: Boolean!
   schoolClass: SchoolClassNode
   entries: [ProjectEntryNode]
   pk: Int
   entriesCount: Int
+  owner: PublicUserNode
 }
 
 type ProjectEntryNode implements Node {