Fetch resources faster

src/components/Learningpath/Learningpath.tsx

@@ -176,7 +176,6 @@ const Learningpath = ({
             )}
             <LearningpathEmbed
               skipToContentId={!learningpathStep.showTitle ? skipToContentId : undefined}
-              topic={topic}
               subjectId={subject?.id}
               learningpathStep={learningpathStep}
               breadcrumbItems={breadcrumbItems}
@@ -227,9 +226,7 @@ Learningpath.fragments = {
   topic: gql`
     fragment Learningpath_Topic on Topic {
       ...LastLearningpathStepInfo_Topic
-      ...LearningpathEmbed_Topic
     }
-    ${LearningpathEmbed.fragments.topic}
     ${LastLearningpathStepInfo.fragments.topic}
   `,
   resourceType: gql`

src/components/Learningpath/LearningpathEmbed.tsx

@@ -21,7 +21,6 @@ import config from "../../config";
 import ErrorPage from "../../containers/ErrorPage";
 import {
   GQLLearningpathEmbed_LearningpathStepFragment,
-  GQLLearningpathEmbed_TopicFragment,
   GQLLearningpathStepQuery,
   GQLLearningpathStepQueryVariables,
 } from "../../graphqlTypes";
@@ -72,12 +71,11 @@ const converterComponents: DynamicComponents = {
 
 interface Props {
   learningpathStep: GQLLearningpathEmbed_LearningpathStepFragment;
-  topic?: GQLLearningpathEmbed_TopicFragment;
   skipToContentId?: string;
   breadcrumbItems: Breadcrumb[];
   subjectId?: string;
 }
-const LearningpathEmbed = ({ learningpathStep, skipToContentId, topic, subjectId, breadcrumbItems }: Props) => {
+const LearningpathEmbed = ({ learningpathStep, skipToContentId, subjectId, breadcrumbItems }: Props) => {
   const { t, i18n } = useTranslation();
   const location = useLocation();
   const [taxId, articleId] =
@@ -178,7 +176,7 @@ const LearningpathEmbed = ({ learningpathStep, skipToContentId, topic, subjectId
         id={skipToContentId}
         article={article}
         oembed={data?.article?.oembed}
-        {...getArticleProps(resource, topic)}
+        {...getArticleProps(resource)}
       >
         {path ? <CreatedBy name={t("createdBy.content")} description={t("createdBy.text")} url={contentUrl} /> : <></>}
       </Article>
@@ -206,13 +204,6 @@ const articleFragment = gql`
 `;
 
 LearningpathEmbed.fragments = {
-  topic: gql`
-    fragment LearningpathEmbed_Topic on Topic {
-      supplementaryResources(subjectId: $subjectId) {
-        id
-      }
-    }
-  `,
   article: articleFragment,
   learningpathStep: gql`
     fragment LearningpathEmbed_LearningpathStep on LearningpathStep {
@@ -254,6 +245,7 @@ const learningpathStepQuery = gql`
     resource(id: $resourceId) @include(if: $includeResource) {
       id
       path
+      relevanceId
       resourceTypes {
         id
         name

src/containers/ArticlePage/ArticlePage.tsx

@@ -71,7 +71,6 @@ const ArticlePage = ({
   const { user, authContextLoaded } = useContext(AuthContext);
   const { t, i18n } = useTranslation();
   const { trackPageView } = useTracker();
-  const subjectPageUrl = config.ndlaFrontendDomain;
 
   useEffect(() => {
     if (!loading && authContextLoaded) {
@@ -135,32 +134,24 @@ const ArticlePage = ({
   const contentType = resource ? getContentType(resource) : undefined;
   const resourceType = contentType && isHeroContentType(contentType) ? contentType : undefined;
 
-  const copyPageUrlLink = topic ? `${subjectPageUrl}${topic.path}/${resource.id.replace("urn:", "")}` : undefined;
-  const printUrl = `${subjectPageUrl}/article-iframe/${i18n.language}/article/${resource.article.id}`;
+  const printUrl = `${config.ndlaFrontendDomain}/article-iframe/${i18n.language}/article/${resource.article.id}`;
 
   const breadcrumbItems = toBreadcrumbItems(t("breadcrumb.toFrontpage"), [...topicPath, resource]);
 
   return (
     <main>
-      <ArticleHero
-        subject={subject}
-        resourceType={resourceType}
-        metaImage={article.metaImage}
-        breadcrumbItems={breadcrumbItems}
-      />
+      <ArticleHero resourceType={resourceType} metaImage={article.metaImage} breadcrumbItems={breadcrumbItems} />
       <Helmet>
         <title>{`${getDocumentTitle(t, resource, subject)}`}</title>
         {scripts?.map((script) => (
           <script key={script.src} src={script.src} type={script.type} async={script.async} defer={script.defer} />
         ))}
-        {copyPageUrlLink && (
-          <link
-            rel="alternate"
-            type="application/json+oembed"
-            href={`${config.ndlaFrontendDomain}/oembed?url=${copyPageUrlLink}`}
-            title={article.title}
-          />
-        )}
+        <link
+          rel="alternate"
+          type="application/json+oembed"
+          href={`${config.ndlaFrontendDomain}/oembed?url=${config.ndlaFrontendDomain}${resource.path}`}
+          title={article.title}
+        />
         {subject?.metadata.customFields?.[TAXONOMY_CUSTOM_FIELD_SUBJECT_CATEGORY] ===
           constants.subjectCategories.ARCHIVE_SUBJECTS && <meta name="robots" content="noindex, nofollow" />}
         <meta name="pageid" content={`${article.id}`} />
@@ -186,7 +177,7 @@ const ArticlePage = ({
           subjectId={subject?.id}
           showFavoriteButton={config.feideEnabled}
           oembed={article.oembed}
-          {...getArticleProps(resource, topic)}
+          {...getArticleProps(resource)}
         />
         {topic && (
           <LayoutItem layout="extend">
@@ -226,16 +217,15 @@ export const articlePageFragments = {
           title
         }
       }
-      ...ArticleHero_Subject
     }
-    ${ArticleHero.fragments.subject}
   `,
   resource: gql`
     fragment ArticlePage_Resource on Resource {
       id
       name
       path
       contentUri
+      relevanceId
       article {
         created
         updated
@@ -255,7 +245,6 @@ export const articlePageFragments = {
   `,
   topic: gql`
     fragment ArticlePage_Topic on Topic {
-      path
       ...Resources_Topic
     }
     ${Resources.fragments.topic}

src/containers/ArticlePage/components/ArticleHero.tsx

@@ -11,7 +11,7 @@ import { gql } from "@apollo/client";
 import styled from "@emotion/styled";
 import { stackOrder } from "@ndla/core";
 import { Hero, HeroContent, HeroContentType, HomeBreadcrumb, NdlaFilmHero, OneColumn } from "@ndla/ui";
-import { GQLArticleHero_MetaImageFragment, GQLArticleHero_SubjectFragment } from "../../../graphqlTypes";
+import { GQLArticleHero_MetaImageFragment } from "../../../graphqlTypes";
 import { Breadcrumb as BreadcrumbType } from "../../../interfaces";
 import { useIsNdlaFilm } from "../../../routeHelpers";
 
@@ -52,7 +52,6 @@ const HeroBackground = styled.div`
 `;
 
 interface Props {
-  subject?: GQLArticleHero_SubjectFragment;
   resourceType?: HeroContentType;
   metaImage?: GQLArticleHero_MetaImageFragment;
   breadcrumbItems: BreadcrumbType[];
@@ -62,7 +61,7 @@ const StyledSection = styled.section`
   z-index: ${stackOrder.offsetSingle};
 `;
 
-const ArticleHero = ({ resourceType, metaImage, subject, breadcrumbItems }: Props) => {
+const ArticleHero = ({ resourceType, metaImage, breadcrumbItems }: Props) => {
   const ndlaFilm = useIsNdlaFilm();
   return (
     <WrapperComponent ndlaFilm={ndlaFilm} resourceType={resourceType} metaImage={metaImage}>
@@ -74,7 +73,7 @@ const ArticleHero = ({ resourceType, metaImage, subject, breadcrumbItems }: Prop
       <OneColumn>
         <HeroContent data-image={!!(ndlaFilm && metaImage?.url)}>
           <StyledSection>
-            {subject && <HomeBreadcrumb light={ndlaFilm ? true : undefined} items={breadcrumbItems} />}
+            {<HomeBreadcrumb light={ndlaFilm ? true : undefined} items={breadcrumbItems} />}
           </StyledSection>
         </HeroContent>
       </OneColumn>
@@ -83,11 +82,6 @@ const ArticleHero = ({ resourceType, metaImage, subject, breadcrumbItems }: Prop
 };
 
 ArticleHero.fragments = {
-  subject: gql`
-    fragment ArticleHero_Subject on Subject {
-      id
-    }
-  `,
   metaImage: gql`
     fragment ArticleHero_MetaImage on MetaImage {
       url

src/containers/PlainArticlePage/PlainArticleContainer.tsx

@@ -20,7 +20,6 @@ import AddEmbedToFolder from "../../components/MyNdla/AddEmbedToFolder";
 import SocialMediaMetadata from "../../components/SocialMediaMetadata";
 import config from "../../config";
 import { GQLPlainArticleContainer_ArticleFragment } from "../../graphqlTypes";
-import { getArticleProps } from "../../util/getArticleProps";
 import { getArticleScripts } from "../../util/getArticleScripts";
 import getStructuredDataFromArticle, { structuredArticleDataFragment } from "../../util/getStructuredDataFromArticle";
 import { htmlTitle } from "../../util/titleHelper";
@@ -97,14 +96,7 @@ const PlainArticleContainer = ({ article: propArticle, skipToContentId }: Props)
         trackableContent={article}
       />
       <OneColumn>
-        <Article
-          contentTransformed
-          isPlainArticle
-          id={skipToContentId}
-          article={article}
-          oembed={undefined}
-          {...getArticleProps(undefined, undefined)}
-        />
+        <Article contentTransformed isPlainArticle id={skipToContentId} article={article} oembed={undefined} label="" />
       </OneColumn>
     </div>
   );

src/containers/SharedFolderPage/components/SharedArticleContainer.tsx

@@ -24,7 +24,6 @@ import {
   GQLFolderResourceMetaSearchQuery,
   GQLSharedResourceArticleContainer_ArticleFragment,
 } from "../../../graphqlTypes";
-import { getArticleProps } from "../../../util/getArticleProps";
 import { getArticleScripts } from "../../../util/getArticleScripts";
 import { getContentTypeFromResourceTypes } from "../../../util/getContentType";
 import { structuredArticleDataFragment } from "../../../util/getStructuredDataFromArticle";
@@ -97,7 +96,6 @@ const SharedArticleContainer = ({ article: propArticle, meta, title }: Props) =>
         id={SKIP_TO_CONTENT_ID}
         oembed={undefined}
         article={article}
-        {...getArticleProps(undefined, undefined)}
         contentType={contentType?.contentType}
         label={contentType?.label || ""}
       />

src/graphqlTypes.ts

@@ -2221,8 +2221,7 @@ export type GQLLastLearningpathStepInfo_ResourceTypeDefinitionFragment = {
   __typename?: "ResourceTypeDefinition";
 } & GQLResources_ResourceTypeDefinitionFragment;
 
-export type GQLLearningpath_TopicFragment = { __typename?: "Topic" } & GQLLastLearningpathStepInfo_TopicFragment &
-  GQLLearningpathEmbed_TopicFragment;
+export type GQLLearningpath_TopicFragment = { __typename?: "Topic" } & GQLLastLearningpathStepInfo_TopicFragment;
 
 export type GQLLearningpath_ResourceTypeDefinitionFragment = {
   __typename?: "ResourceTypeDefinition";
@@ -2277,11 +2276,6 @@ export type GQLLearningpathEmbed_ArticleFragment = {
 } & GQLStructuredArticleDataFragment &
   GQLArticle_ArticleFragment;
 
-export type GQLLearningpathEmbed_TopicFragment = {
-  __typename?: "Topic";
-  supplementaryResources?: Array<{ __typename?: "Resource"; id: string }>;
-};
-
 export type GQLLearningpathEmbed_LearningpathStepFragment = {
   __typename?: "LearningpathStep";
   resource?: {
@@ -2309,6 +2303,7 @@ export type GQLLearningpathStepQuery = {
     __typename?: "Resource";
     id: string;
     path: string;
+    relevanceId?: string;
     resourceTypes?: Array<{ __typename?: "ResourceType"; id: string; name: string }>;
   };
 };
@@ -2502,6 +2497,7 @@ export type GQLArticlePage_ResourceFragment = {
   name: string;
   path: string;
   contentUri?: string;
+  relevanceId?: string;
   article?: {
     __typename?: "Article";
     created: string;
@@ -4293,6 +4289,7 @@ export type GQLIframeArticlePage_ResourceFragment = {
   __typename?: "Resource";
   id: string;
   path: string;
+  relevanceId?: string;
   resourceTypes?: Array<{ __typename?: "ResourceType"; id: string; name: string }>;
 };
 

src/iframe/IframeArticlePage.tsx

@@ -146,6 +146,7 @@ export const iframeArticlePageFragments = {
     fragment IframeArticlePage_Resource on Resource {
       id
       path
+      relevanceId
       resourceTypes {
         id
         name

src/util/getArticleProps.ts

@@ -9,18 +9,12 @@
 import { getContentType } from "./getContentType";
 import { GQLResource } from "../graphqlTypes";
 
-interface Topic {
-  supplementaryResources?: { id: string }[];
-}
-export const getArticleProps = <T extends Topic>(
-  resource: Pick<GQLResource, "resourceTypes" | "id"> | undefined,
-  topic?: T,
-) => {
+export const getArticleProps = (resource: Pick<GQLResource, "resourceTypes" | "id" | "relevanceId"> | undefined) => {
   const hasResourceTypes = resource?.resourceTypes && resource?.resourceTypes?.length > 0;
 
   const contentType = hasResourceTypes && resource ? getContentType(resource) : undefined;
 
-  const additional = topic?.supplementaryResources?.some((item) => item?.id === resource?.id) ?? false;
+  const additional = resource?.relevanceId !== "urn:relevance:core";
 
   const label = (hasResourceTypes && resource?.resourceTypes![0]?.name) || "";
   return { contentType, label, additional };