Update the example of handling assigned attributes (#1665)

* Update the example of handling assigned attributes

* Add migration guide

* Clean up example query after review

Author: korycins

docs/api-reference/attributes/interfaces/_category_.yml

@@ -0,0 +1,5 @@
+label: Interfaces
+position: 1
+link: null
+collapsible: true
+collapsed: true

docs/api-reference/attributes/interfaces/assigned-attribute.mdx

@@ -0,0 +1,56 @@
+---
+api_reference: true
+id: assigned-attribute
+title: AssignedAttribute
+---
+
+export const Bullet = () => <><span style={{ fontWeight: 'normal', fontSize: '.5em', color: 'var(--ifm-color-secondary-darkest)' }}>&nbsp;●&nbsp;</span></>
+
+export const SpecifiedBy = (props) => <>Specification<a className="link" style={{ fontSize:'1.5em', paddingLeft:'4px' }} target="\_blank" href={props.url} title={'Specified by ' + props.url}>⎘</a></>
+
+export const Badge = (props) => <><span className={props.class}>{props.text}</span></>
+
+import { useState } from 'react';
+
+export const Details = ({ dataOpen, dataClose, children, startOpen = false }) => {
+const [open, setOpen] = useState(startOpen);
+return (
+<details {...(open ? { open: true } : {})} className="details" style={{ border:'none', boxShadow:'none', background:'var(--ifm-background-color)' }}>
+<summary
+onClick={(e) => {
+e.preventDefault();
+setOpen((open) => !open);
+}}
+style={{ listStyle:'none' }} >
+{open ? dataOpen : dataClose}
+</summary>
+{open && children}
+</details>
+);
+};
+
+Represents an attribute assigned to an object.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+
+
+```graphql
+interface AssignedAttribute {
+  attribute: Attribute!
+}
+```
+
+### Fields
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedAttribute.<b>attribute</b></code>](#)<Bullet />[`Attribute!`](../../../api-reference/attributes/objects/attribute.mdx) <Badge class="badge badge--secondary" text="non-null"/> <Badge class="badge badge--secondary" text="object"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Attribute assigned to an object.
+
+### Member Of
+
+[`Page`](../../../api-reference/pages/objects/page.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`Product`](../../../api-reference/products/objects/product.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`ProductVariant`](../../../api-reference/products/objects/product-variant.mdx) <Badge class="badge badge--secondary" text="object"/>
+
+### Implemented By
+
+[`AssignedBooleanAttribute`](../../../api-reference/attributes/objects/assigned-boolean-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedDateAttribute`](../../../api-reference/attributes/objects/assigned-date-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedDateTimeAttribute`](../../../api-reference/attributes/objects/assigned-date-time-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedFileAttribute`](../../../api-reference/attributes/objects/assigned-file-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedMultiCategoryReferenceAttribute`](../../../api-reference/attributes/objects/assigned-multi-category-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedMultiChoiceAttribute`](../../../api-reference/attributes/objects/assigned-multi-choice-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedMultiCollectionReferenceAttribute`](../../../api-reference/attributes/objects/assigned-multi-collection-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedMultiPageReferenceAttribute`](../../../api-reference/attributes/objects/assigned-multi-page-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedMultiProductReferenceAttribute`](../../../api-reference/attributes/objects/assigned-multi-product-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedMultiProductVariantReferenceAttribute`](../../../api-reference/attributes/objects/assigned-multi-product-variant-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedNumericAttribute`](../../../api-reference/attributes/objects/assigned-numeric-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedPlainTextAttribute`](../../../api-reference/attributes/objects/assigned-plain-text-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSingleCategoryReferenceAttribute`](../../../api-reference/attributes/objects/assigned-single-category-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSingleChoiceAttribute`](../../../api-reference/attributes/objects/assigned-single-choice-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSingleCollectionReferenceAttribute`](../../../api-reference/attributes/objects/assigned-single-collection-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSinglePageReferenceAttribute`](../../../api-reference/attributes/objects/assigned-single-page-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSingleProductReferenceAttribute`](../../../api-reference/attributes/objects/assigned-single-product-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSingleProductVariantReferenceAttribute`](../../../api-reference/attributes/objects/assigned-single-product-variant-reference-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSwatchAttribute`](../../../api-reference/attributes/objects/assigned-swatch-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedTextAttribute`](../../../api-reference/attributes/objects/assigned-text-attribute.mdx) <Badge class="badge badge--secondary" text="object"/>

docs/api-reference/attributes/objects/assigned-boolean-attribute.mdx

@@ -0,0 +1,63 @@
+---
+api_reference: true
+id: assigned-boolean-attribute
+title: AssignedBooleanAttribute
+---
+
+export const Bullet = () => <><span style={{ fontWeight: 'normal', fontSize: '.5em', color: 'var(--ifm-color-secondary-darkest)' }}>&nbsp;●&nbsp;</span></>
+
+export const SpecifiedBy = (props) => <>Specification<a className="link" style={{ fontSize:'1.5em', paddingLeft:'4px' }} target="\_blank" href={props.url} title={'Specified by ' + props.url}>⎘</a></>
+
+export const Badge = (props) => <><span className={props.class}>{props.text}</span></>
+
+import { useState } from 'react';
+
+export const Details = ({ dataOpen, dataClose, children, startOpen = false }) => {
+const [open, setOpen] = useState(startOpen);
+return (
+<details {...(open ? { open: true } : {})} className="details" style={{ border:'none', boxShadow:'none', background:'var(--ifm-background-color)' }}>
+<summary
+onClick={(e) => {
+e.preventDefault();
+setOpen((open) => !open);
+}}
+style={{ listStyle:'none' }} >
+{open ? dataOpen : dataClose}
+</summary>
+{open && children}
+</details>
+);
+};
+
+Represents a boolean attribute.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+
+
+```graphql
+type AssignedBooleanAttribute implements AssignedAttribute {
+  attribute: Attribute!
+  value: Boolean
+}
+```
+
+### Fields
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedBooleanAttribute.<b>attribute</b></code>](#)<Bullet />[`Attribute!`](../../../api-reference/attributes/objects/attribute.mdx) <Badge class="badge badge--secondary" text="non-null"/> <Badge class="badge badge--secondary" text="object"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Attribute assigned to an object.
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedBooleanAttribute.<b>value</b></code>](#)<Bullet />[`Boolean`](../../../api-reference/miscellaneous/scalars/boolean.mdx) <Badge class="badge badge--secondary" text="scalar"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+The assigned boolean value.
+
+### Interfaces
+
+#### [`AssignedAttribute`](../../../api-reference/attributes/interfaces/assigned-attribute.mdx) <Badge class="badge badge--secondary" text="interface"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Represents an attribute assigned to an object.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+

docs/api-reference/attributes/objects/assigned-choice-attribute-value.mdx

@@ -0,0 +1,64 @@
+---
+api_reference: true
+id: assigned-choice-attribute-value
+title: AssignedChoiceAttributeValue
+---
+
+export const Bullet = () => <><span style={{ fontWeight: 'normal', fontSize: '.5em', color: 'var(--ifm-color-secondary-darkest)' }}>&nbsp;●&nbsp;</span></>
+
+export const SpecifiedBy = (props) => <>Specification<a className="link" style={{ fontSize:'1.5em', paddingLeft:'4px' }} target="\_blank" href={props.url} title={'Specified by ' + props.url}>⎘</a></>
+
+export const Badge = (props) => <><span className={props.class}>{props.text}</span></>
+
+import { useState } from 'react';
+
+export const Details = ({ dataOpen, dataClose, children, startOpen = false }) => {
+const [open, setOpen] = useState(startOpen);
+return (
+<details {...(open ? { open: true } : {})} className="details" style={{ border:'none', boxShadow:'none', background:'var(--ifm-background-color)' }}>
+<summary
+onClick={(e) => {
+e.preventDefault();
+setOpen((open) => !open);
+}}
+style={{ listStyle:'none' }} >
+{open ? dataOpen : dataClose}
+</summary>
+{open && children}
+</details>
+);
+};
+
+Represents a single choice value of the attribute.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+
+
+```graphql
+type AssignedChoiceAttributeValue {
+  name: String
+  slug: String
+  translation(languageCode: LanguageCodeEnum!): String
+}
+```
+
+### Fields
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedChoiceAttributeValue.<b>name</b></code>](#)<Bullet />[`String`](../../../api-reference/miscellaneous/scalars/string.mdx) <Badge class="badge badge--secondary" text="scalar"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+Name of a value displayed in the interface.
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedChoiceAttributeValue.<b>slug</b></code>](#)<Bullet />[`String`](../../../api-reference/miscellaneous/scalars/string.mdx) <Badge class="badge badge--secondary" text="scalar"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+Internal representation of a value (unique per attribute).
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedChoiceAttributeValue.<b>translation</b></code>](#)<Bullet />[`String`](../../../api-reference/miscellaneous/scalars/string.mdx) <Badge class="badge badge--secondary" text="scalar"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+Translation of the name.
+
+##### [<code style={{ fontWeight: 'normal' }}>AssignedChoiceAttributeValue.translation.<b>languageCode</b></code>](#)<Bullet />[`LanguageCodeEnum!`](../../../api-reference/miscellaneous/enums/language-code-enum.mdx) <Badge class="badge badge--secondary" text="non-null"/> <Badge class="badge badge--secondary" text="enum"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+### Member Of
+
+[`AssignedMultiChoiceAttribute`](../../../api-reference/attributes/objects/assigned-multi-choice-attribute.mdx) <Badge class="badge badge--secondary" text="object"/><Bullet />[`AssignedSingleChoiceAttribute`](../../../api-reference/attributes/objects/assigned-single-choice-attribute.mdx) <Badge class="badge badge--secondary" text="object"/>

docs/api-reference/attributes/objects/assigned-date-attribute.mdx

@@ -0,0 +1,63 @@
+---
+api_reference: true
+id: assigned-date-attribute
+title: AssignedDateAttribute
+---
+
+export const Bullet = () => <><span style={{ fontWeight: 'normal', fontSize: '.5em', color: 'var(--ifm-color-secondary-darkest)' }}>&nbsp;●&nbsp;</span></>
+
+export const SpecifiedBy = (props) => <>Specification<a className="link" style={{ fontSize:'1.5em', paddingLeft:'4px' }} target="\_blank" href={props.url} title={'Specified by ' + props.url}>⎘</a></>
+
+export const Badge = (props) => <><span className={props.class}>{props.text}</span></>
+
+import { useState } from 'react';
+
+export const Details = ({ dataOpen, dataClose, children, startOpen = false }) => {
+const [open, setOpen] = useState(startOpen);
+return (
+<details {...(open ? { open: true } : {})} className="details" style={{ border:'none', boxShadow:'none', background:'var(--ifm-background-color)' }}>
+<summary
+onClick={(e) => {
+e.preventDefault();
+setOpen((open) => !open);
+}}
+style={{ listStyle:'none' }} >
+{open ? dataOpen : dataClose}
+</summary>
+{open && children}
+</details>
+);
+};
+
+Represents a date attribute.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+
+
+```graphql
+type AssignedDateAttribute implements AssignedAttribute {
+  attribute: Attribute!
+  value: Date
+}
+```
+
+### Fields
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedDateAttribute.<b>attribute</b></code>](#)<Bullet />[`Attribute!`](../../../api-reference/attributes/objects/attribute.mdx) <Badge class="badge badge--secondary" text="non-null"/> <Badge class="badge badge--secondary" text="object"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Attribute assigned to an object.
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedDateAttribute.<b>value</b></code>](#)<Bullet />[`Date`](../../../api-reference/miscellaneous/scalars/date.mdx) <Badge class="badge badge--secondary" text="scalar"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+The assigned date value.
+
+### Interfaces
+
+#### [`AssignedAttribute`](../../../api-reference/attributes/interfaces/assigned-attribute.mdx) <Badge class="badge badge--secondary" text="interface"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Represents an attribute assigned to an object.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+

docs/api-reference/attributes/objects/assigned-date-time-attribute.mdx

@@ -0,0 +1,63 @@
+---
+api_reference: true
+id: assigned-date-time-attribute
+title: AssignedDateTimeAttribute
+---
+
+export const Bullet = () => <><span style={{ fontWeight: 'normal', fontSize: '.5em', color: 'var(--ifm-color-secondary-darkest)' }}>&nbsp;●&nbsp;</span></>
+
+export const SpecifiedBy = (props) => <>Specification<a className="link" style={{ fontSize:'1.5em', paddingLeft:'4px' }} target="\_blank" href={props.url} title={'Specified by ' + props.url}>⎘</a></>
+
+export const Badge = (props) => <><span className={props.class}>{props.text}</span></>
+
+import { useState } from 'react';
+
+export const Details = ({ dataOpen, dataClose, children, startOpen = false }) => {
+const [open, setOpen] = useState(startOpen);
+return (
+<details {...(open ? { open: true } : {})} className="details" style={{ border:'none', boxShadow:'none', background:'var(--ifm-background-color)' }}>
+<summary
+onClick={(e) => {
+e.preventDefault();
+setOpen((open) => !open);
+}}
+style={{ listStyle:'none' }} >
+{open ? dataOpen : dataClose}
+</summary>
+{open && children}
+</details>
+);
+};
+
+Represents a date time attribute.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+
+
+```graphql
+type AssignedDateTimeAttribute implements AssignedAttribute {
+  attribute: Attribute!
+  value: DateTime
+}
+```
+
+### Fields
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedDateTimeAttribute.<b>attribute</b></code>](#)<Bullet />[`Attribute!`](../../../api-reference/attributes/objects/attribute.mdx) <Badge class="badge badge--secondary" text="non-null"/> <Badge class="badge badge--secondary" text="object"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Attribute assigned to an object.
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedDateTimeAttribute.<b>value</b></code>](#)<Bullet />[`DateTime`](../../../api-reference/miscellaneous/scalars/date-time.mdx) <Badge class="badge badge--secondary" text="scalar"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+The assigned date time value.
+
+### Interfaces
+
+#### [`AssignedAttribute`](../../../api-reference/attributes/interfaces/assigned-attribute.mdx) <Badge class="badge badge--secondary" text="interface"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Represents an attribute assigned to an object.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+

docs/api-reference/attributes/objects/assigned-file-attribute.mdx

@@ -0,0 +1,63 @@
+---
+api_reference: true
+id: assigned-file-attribute
+title: AssignedFileAttribute
+---
+
+export const Bullet = () => <><span style={{ fontWeight: 'normal', fontSize: '.5em', color: 'var(--ifm-color-secondary-darkest)' }}>&nbsp;●&nbsp;</span></>
+
+export const SpecifiedBy = (props) => <>Specification<a className="link" style={{ fontSize:'1.5em', paddingLeft:'4px' }} target="\_blank" href={props.url} title={'Specified by ' + props.url}>⎘</a></>
+
+export const Badge = (props) => <><span className={props.class}>{props.text}</span></>
+
+import { useState } from 'react';
+
+export const Details = ({ dataOpen, dataClose, children, startOpen = false }) => {
+const [open, setOpen] = useState(startOpen);
+return (
+<details {...(open ? { open: true } : {})} className="details" style={{ border:'none', boxShadow:'none', background:'var(--ifm-background-color)' }}>
+<summary
+onClick={(e) => {
+e.preventDefault();
+setOpen((open) => !open);
+}}
+style={{ listStyle:'none' }} >
+{open ? dataOpen : dataClose}
+</summary>
+{open && children}
+</details>
+);
+};
+
+Represents file attribute.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+
+
+```graphql
+type AssignedFileAttribute implements AssignedAttribute {
+  attribute: Attribute!
+  value: File
+}
+```
+
+### Fields
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedFileAttribute.<b>attribute</b></code>](#)<Bullet />[`Attribute!`](../../../api-reference/attributes/objects/attribute.mdx) <Badge class="badge badge--secondary" text="non-null"/> <Badge class="badge badge--secondary" text="object"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Attribute assigned to an object.
+
+#### [<code style={{ fontWeight: 'normal' }}>AssignedFileAttribute.<b>value</b></code>](#)<Bullet />[`File`](../../../api-reference/miscellaneous/objects/file.mdx) <Badge class="badge badge--secondary" text="object"/> <Badge class="badge badge--secondary" text="miscellaneous"/>
+
+The assigned file.
+
+### Interfaces
+
+#### [`AssignedAttribute`](../../../api-reference/attributes/interfaces/assigned-attribute.mdx) <Badge class="badge badge--secondary" text="interface"/> <Badge class="badge badge--secondary" text="attributes"/>
+
+Represents an attribute assigned to an object.
+
+
+<Badge text="Added in Saleor 3.22 (unreleased)" class="badge badge--secondary margin-bottom--sm" />
+