Content Schema: ANS Feed (0.6.2)

This the Arc Core Component representing a GraphQL schema that can be used with a content source.

Context

https://graphql.org/learn/

A GraphQL schema defines all potential queries possible against a content source, using strongly typed field definitions.

Queries are executed using GraphQL filters, subsets of the fields defined in the schema, per content source call, in the form of a URL filter param, ex:

/content/v4/search/?size=10&filter=content_elements%20{%20canonical_url%20description%20{%20basic%20}}

Only those fields specified per filter are returned to the client, reducing payload, without requiring custom endpoints.

Schemas can be large, filters should be small.

Getting started

This Core Component must be used within a Fusion project.

It should be used for any feature showing a feed of ANS stories (Flex Feed, Section Feed, Recirc Feed, etc).

1. Add this schema as a dependency of the repo. npm install @arc-core-components/content-schema_ans-feed-v0.6.2
2. Create a file of your desired schema name within the /schemas folder. For this content source, the suggested name is ans-feed.js
3. This is the name you should use when referencing this schema in any content config within a custom field.
4. Paste the following into ans-feed.js:

import schema from "@arc-core-components/content-schema_ans-feed-v0.6.2";

export default schema;

How to use

Add the ans-feed schema to your Fusion Content Source:

In every Fusion data request (getContent, fetchContent), pass a filter object as the 3rd param:

Example of an ANS Feed filter (/filters/ansFeedFilter.js):

export default `
{
  content_elements {
    canonical_url
    description {
      basic
    }
    headlines {
      basic
    }
    promo_items {
      basic {
        type
        url
      }
    }
    taxonomy {
      primary_section {
        name
      }
    }
    credits {
      by {
        name
        image {
          url
        }
        slug
      }
    }
  }
}
`;

Fusion Data Viewer

1. Run the following utility in your browser console (based on Fusion version):

   /core-components/documentation/utilities/fusionDataViewer2.0.js /core-components/documentation/utilities/fusionDataViewer2.1.js

2. Click the Content Cache button to see the summarized JSON returned to the page

Note: To view the difference in data returned, without running a script, simply right click -> View Page Source, to see the JSON data loaded onto the page.

Results

Comparison of data returned from the same Section page:

ANS payload without GraphQL Filters (all fields returned) -

ANS payload with GraphQL Filters (only filter fields returned) -

Summary

Page size reduced by ~2.3mb