saleor-dashboard/src/products/queries.ts
Grzegorz Derdak 429e7b9d83
Add ability to upload video URL to product gallery (#972)
* Create a dropdown and modal for uploading Video URLs

* Add ability to upload video URL to product gallery

* Add support for other video providers, minor UI tweaks

* Extract translations

* Style changes

* Adjust dashboard to fetch media oembed data

* Update codebase to match the schema

* Changes after code review

* Update schema.graphql and fixtures

* Update defaultMessages.json

* Fix failing jest tests

* Update schema and types
2021-03-17 14:07:48 +01:00

326 lines
6.8 KiB
TypeScript

import { attributeValueFragment } from "@saleor/fragments/attributes";
import { pageInfoFragment } from "@saleor/fragments/pageInfo";
import {
fragmentVariant,
productFragment,
productFragmentDetails,
productVariantAttributesFragment,
variantAttributeFragment
} from "@saleor/fragments/products";
import { taxTypeFragment } from "@saleor/fragments/taxes";
import { warehouseFragment } from "@saleor/fragments/warehouses";
import makeQuery from "@saleor/hooks/makeQuery";
import {
ProductMediaById,
ProductMediaByIdVariables
} from "@saleor/products/types/ProductMediaById";
import gql from "graphql-tag";
import { CountAllProducts } from "./types/CountAllProducts";
import {
CreateMultipleVariantsData,
CreateMultipleVariantsDataVariables
} from "./types/CreateMultipleVariantsData";
import {
GridAttributes,
GridAttributesVariables
} from "./types/GridAttributes";
import {
InitialProductFilterData,
InitialProductFilterDataVariables
} from "./types/InitialProductFilterData";
import {
ProductDetails,
ProductDetailsVariables
} from "./types/ProductDetails";
import { ProductList, ProductListVariables } from "./types/ProductList";
import {
ProductVariantCreateData,
ProductVariantCreateDataVariables
} from "./types/ProductVariantCreateData";
import {
ProductVariantDetails,
ProductVariantDetailsVariables
} from "./types/ProductVariantDetails";
const initialProductFilterDataQuery = gql`
query InitialProductFilterData(
$categories: [ID!]
$collections: [ID!]
$productTypes: [ID!]
) {
attributes(first: 100, filter: { filterableInDashboard: true }) {
edges {
node {
id
name
slug
values {
id
name
slug
}
}
}
}
categories(first: 100, filter: { ids: $categories }) {
edges {
node {
id
name
}
}
}
collections(first: 100, filter: { ids: $collections }) {
edges {
node {
id
name
}
}
}
productTypes(first: 100, filter: { ids: $productTypes }) {
edges {
node {
id
name
}
}
}
}
`;
export const useInitialProductFilterDataQuery = makeQuery<
InitialProductFilterData,
InitialProductFilterDataVariables
>(initialProductFilterDataQuery);
const productListQuery = gql`
${productFragment}
${attributeValueFragment}
query ProductList(
$first: Int
$after: String
$last: Int
$before: String
$filter: ProductFilterInput
$sort: ProductOrder
) {
products(
before: $before
after: $after
first: $first
last: $last
filter: $filter
sortBy: $sort
) {
edges {
node {
...ProductFragment
attributes {
attribute {
id
}
values {
...AttributeValueFragment
}
}
}
}
pageInfo {
hasPreviousPage
hasNextPage
startCursor
endCursor
}
totalCount
}
}
`;
export const useProductListQuery = makeQuery<ProductList, ProductListVariables>(
productListQuery
);
const countAllProductsQuery = gql`
query CountAllProducts {
products {
totalCount
}
}
`;
export const useCountAllProducts = makeQuery<CountAllProducts, null>(
countAllProductsQuery
);
const productDetailsQuery = gql`
${productFragmentDetails}
${taxTypeFragment}
query ProductDetails($id: ID!, $channel: String) {
product(id: $id, channel: $channel) {
...Product
}
taxTypes {
...TaxTypeFragment
}
}
`;
export const useProductDetails = makeQuery<
ProductDetails,
ProductDetailsVariables
>(productDetailsQuery);
export const useProductDetailsQuery = makeQuery<
ProductDetails,
ProductDetailsVariables
>(productDetailsQuery);
const productVariantQuery = gql`
${fragmentVariant}
query ProductVariantDetails($id: ID!) {
productVariant(id: $id) {
...ProductVariant
}
}
`;
export const useProductVariantQuery = makeQuery<
ProductVariantDetails,
ProductVariantDetailsVariables
>(productVariantQuery);
const productVariantCreateQuery = gql`
${variantAttributeFragment}
query ProductVariantCreateData($id: ID!) {
product(id: $id) {
id
media {
id
sortOrder
url
}
channelListings {
channel {
id
name
currencyCode
}
}
name
productType {
id
selectionVariantAttributes: variantAttributes(
variantSelection: VARIANT_SELECTION
) {
...VariantAttributeFragment
}
nonSelectionVariantAttributes: variantAttributes(
variantSelection: NOT_VARIANT_SELECTION
) {
...VariantAttributeFragment
}
}
thumbnail {
url
}
variants {
id
name
sku
media {
id
url
type
}
}
}
}
`;
export const useProductVariantCreateQuery = makeQuery<
ProductVariantCreateData,
ProductVariantCreateDataVariables
>(productVariantCreateQuery);
const productMediaQuery = gql`
query ProductMediaById($productId: ID!, $mediaId: ID!) {
product(id: $productId) {
id
name
mainImage: mediaById(id: $mediaId) {
id
alt
url
type
oembedData
}
media {
id
url(size: 48)
alt
type
oembedData
}
}
}
`;
export const useProductMediaQuery = makeQuery<
ProductMediaById,
ProductMediaByIdVariables
>(productMediaQuery);
const availableInGridAttributes = gql`
${pageInfoFragment}
query GridAttributes($first: Int!, $after: String, $ids: [ID!]!) {
availableInGrid: attributes(
first: $first
after: $after
filter: {
availableInGrid: true
isVariantOnly: false
type: PRODUCT_TYPE
}
) {
edges {
node {
id
name
}
}
pageInfo {
...PageInfoFragment
}
totalCount
}
grid: attributes(first: 25, filter: { ids: $ids }) {
edges {
node {
id
name
}
}
}
}
`;
export const useAvailableInGridAttributesQuery = makeQuery<
GridAttributes,
GridAttributesVariables
>(availableInGridAttributes);
const createMultipleVariantsData = gql`
${productVariantAttributesFragment}
${warehouseFragment}
query CreateMultipleVariantsData($id: ID!) {
product(id: $id) {
...ProductVariantAttributesFragment
}
warehouses(first: 20) {
edges {
node {
...WarehouseFragment
}
}
}
}
`;
export const useCreateMultipleVariantsData = makeQuery<
CreateMultipleVariantsData,
CreateMultipleVariantsDataVariables
>(createMultipleVariantsData);