Shopify Product Image

This page documents the Shopify Product Image model.

Data Shape

Gadget's database stores Shopify Product Image records by storing and retrieving each of the fields defined on the model in the Gadget Editor to a managed database. Gadget has generated a GraphQL type matching the configured fields for Shopify Product Image:

Shopify Product Image Schema
1export interface ShopifyProductImage {
2 __typename: "ShopifyProductImage";
3
4 /** The globally unique, unchanging identifier for this record. Assigned and managed by Shopify. */
5 id: Scalars["GadgetID"];
6
7 /** The time at which this record was first created. Set once upon record creation and never changed. Managed by Gadget. */
8 createdAt: Scalars["DateTime"];
9
10 /** The time at which this record was last changed. Set each time the record is successfully acted upon by an action. Managed by Gadget. */
11 updatedAt: Scalars["DateTime"];
12
13 /** The current state this record is in. Changed by invoking actions. Managed by Gadget. */
14 state: Scalars["RecordState"];
15
16 height: Scalars["Float"] | null;
17
18 position: Scalars["Float"] | null;
19
20 product: ShopifyProduct | null;
21
22 productId: Scalars["GadgetID"] | null;
23
24 shopifyCreatedAt: Scalars["DateTime"] | null;
25
26 source: Scalars["String"] | null;
27
28 shopifyUpdatedAt: Scalars["DateTime"] | null;
29
30 variants: ShopifyProductVariantConnection;
31
32 width: Scalars["Float"] | null;
33
34 shop: ShopifyShop | null;
35
36 shopId: Scalars["GadgetID"] | null;
37
38 /** Get all the fields for this record. Useful for not having to list out all the fields you want to retrieve, but slower. */
39 _all: Scalars["JSONObject"];
40}
1type ShopifyProductImage {
2 """
3 The globally unique, unchanging identifier for this record. Assigned and managed by Shopify.
4 """
5 id: GadgetID!
6
7 """
8 The time at which this record was first created. Set once upon record creation and never changed. Managed by Gadget.
9 """
10 createdAt: DateTime!
11
12 """
13 The time at which this record was last changed. Set each time the record is successfully acted upon by an action. Managed by Gadget.
14 """
15 updatedAt: DateTime!
16
17 """
18 The current state this record is in. Changed by invoking actions. Managed by Gadget.
19 """
20 state: RecordState!
21 height: Float
22 position: Float
23 product: ShopifyProduct
24 productId: GadgetID
25 shopifyCreatedAt: DateTime
26 source: String
27 shopifyUpdatedAt: DateTime
28 variants(
29 """
30 Returns the items in the list that come after the specified cursor.
31 """
32 after: String
33
34 """
35 Returns the first n items from the list.
36 """
37 first: Int
38
39 """
40 Returns the items in the list that come before the specified cursor.
41 """
42 before: String
43
44 """
45 Returns the last n items from the list.
46 """
47 last: Int
48
49 """
50 A list of sort orders to return the results in
51 """
52 sort: [ShopifyProductVariantSort!]
53
54 """
55 A list of filters to refine the results by
56 """
57 filter: [ShopifyProductVariantFilter!]
58
59 """
60 A free form text search query to find records matching
61 """
62 search: String
63 ): ShopifyProductVariantConnection!
64 width: Float
65 shop: ShopifyShop
66 shopId: GadgetID
67
68 """
69 Get all the fields for this record. Useful for not having to list out all the fields you want to retrieve, but slower.
70 """
71 _all: JSONObject!
72}

You can preview what a real record's shape looks like by fetching it using the alida-quiz-app-2 API Playground.

Any fetched Shopify Product Image record will have this same ShopifyProductImage type, and expose the same data by default, regardless of if it's fetched by ID or as part of a findMany. This means you can select any of the record's fields wherever you like in a GraphQL query according to the use case at hand.

Retrieving one Shopify Product Image record

Individual Shopify Product Image records can be retrieved using the "find by ID" API endpoint. You can also return only some fields, or extra fields beyond what Gadget retrieves by default, using the select option.

The findOne function throws an error if no matching record is found, which you will need to catch and handle. Alternatively, you can use the maybeFindOne function, which returns null if no record is found, without throwing an error.

Similarly, the useFindOne React hook returns (but does not throw) an error when no matching record is found, while the useMaybeFindOne hook simply returns null if no record is found, without also returning an error.

Get one Shopify Product Image
const shopifyProductImageRecord = await api.shopifyProductImage.findOne("some-id");
console.log(shopifyProductImageRecord.id); //=> a string
console.log(shopifyProductImageRecord.createdAt); //=> a Date object
const [result, refresh] = useFindOne(api.shopifyProductImage, "some-id");
const { data, error, fetching } = result;
console.log(data?.id); //=> a string
console.log(data?.createdAt); //=> a Date object
1query GetOneShopifyProductImage($id: GadgetID!) {
2 shopifyProductImage(id: $id) {
3 __typename
4 id
5 state
6 createdAt
7 height
8 position
9 shopifyCreatedAt
10 shopifyUpdatedAt
11 source
12 updatedAt
13 width
14 }
15}
Variables
json
{ "id": "some-id" }

Retrieving the first of many Shopify Product Image records

The first record from a list of records can be retrieved using the "find first" API endpoint. The source list of records can be filtered using the filter option, sorted using the sort option, searched using the search option, though no pagination options are available on this endpoint. You can also return only some fields, or extra fields beyond what Gadget retrieves by default using the select option.

The findFirst function throws an error if no matching record is found, which you will need to catch and handle. Alternatively, you can use the maybeFindFirst function, which returns null if no record is found, without throwing an error.

Similarly, the useFindFirst React hook returns (but does not throw) an error when no matching record is found, while the useMaybeFindFirst hook simply returns null if no record is found, without also returning an error.

Get one Shopify Product Image
const shopifyProductImageRecord = await api.shopifyProductImage.findFirst();
console.log(shopifyProductImageRecord.id); //=> a string
console.log(shopifyProductImageRecord.createdAt); //=> a Date object
const [result, refresh] = useFindFirst(api.shopifyProductImage);
const { data, error, fetching } = result;
console.log(data?.id); //=> a string
console.log(data?.createdAt); //=> a Date object
1query FindManyShopifyProductImages(
2 $first: Int
3 $search: String
4 $sort: [ShopifyProductImageSort!]
5 $filter: [ShopifyProductImageFilter!]
6) {
7 shopifyProductImages(
8 first: $first
9 search: $search
10 sort: $sort
11 filter: $filter
12 ) {
13 edges {
14 node {
15 __typename
16 id
17 state
18 createdAt
19 height
20 position
21 shopifyCreatedAt
22 shopifyUpdatedAt
23 source
24 updatedAt
25 width
26 }
27 }
28 }
29}
Variables
json
{ "first": 1 }

Retrieving many Shopify Product Image records

Pages of Shopify Product Image records can be retrieved by using the "find many" API endpoint. The returned records can be filtered using the filter option, sorted using the sort option, searched using the search option, and paginated using standard Relay-style pagination options. You can also return only some fields, or extra fields beyond what Gadget retrieves by default using the select option.

This GraphQL endpoint returns records in the Relay Connection style (as a list of edges with nodes and cursors) so they can be paginated. The shopifyProductImages GraphQL endpoint works with any Relay-compatible caching client, or you can use Gadget's JS client for pagination with the findMany function.

Find a page of Shopify Product Images

Fetch a page of records with the shopifyProductImage.findMany JS method or the shopifyProductImages GraphQL field. No options are required. The records returned will be implicitly sorted by ID ascending.

Find many Shopify Product Images
const shopifyProductImageRecords = await api.shopifyProductImage.findMany();
console.log(shopifyProductImageRecords.length); //=> a number
console.log(shopifyProductImageRecords[0].id); //=> a string
const [result, refresh] = useFindMany(api.shopifyProductImage);
const { data, error, fetching } = result;
console.log(data?.length); //=> a number
console.log(data?.[0].length); //=> a string
1query FindManyShopifyProductImages {
2 shopifyProductImages {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{}

Sorting

Records can be sorted in the database to retrieve them in a certain order. Records are always implicitly sorted by ID ascending unless an explicit sort on the id field is defined. The GraphQL type ShopifyProductImageSort defines which fields can be sorted by.

Records can be sorted by multiple different fields and in multiple different directions by passing a list of ShopifyProductImageSort instead of just one.

GraphQL
1input ShopifyProductImageSort {
2 id: SortOrder
3 createdAt: SortOrder
4 updatedAt: SortOrder
5 state: SortOrder
6 height: SortOrder
7 position: SortOrder
8 shopifyCreatedAt: SortOrder
9 source: SortOrder
10 shopifyUpdatedAt: SortOrder
11 width: SortOrder
12}

Pass the sort option to the JS client, or the sort variable to a GraphQL query to sort the records returned.

Sort Shopify Product Image by most recently created
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
sort: { createdAt: "Descending" },
});
const [result, refresh] = useFindMany(api.shopifyProductImage, {
sort: { createdAt: "Descending" },
});
const { data, error, fetching } = result;
1query FindManyShopifyProductImages($sort: [ShopifyProductImageSort!]) {
2 shopifyProductImages(sort: $sort) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{ "sort": { "createdAt": "Descending" } }

Sort by multiple fields by passing an array of { [field]: "Ascending" | "Descending" } objects.

Sort Shopify Product Image by multiple fields
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
sort: [{ state: "Descending" }, { createdAt: "Ascending" }],
});
const [result, refresh] = useFindMany(api.shopifyProductImage, {
sort: [{ state: "Descending" }, { createdAt: "Ascending" }],
});
const { data, error, fetching } = result;
1query FindManyShopifyProductImages($sort: [ShopifyProductImageSort!]) {
2 shopifyProductImages(sort: $sort) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{ "sort": [{ "state": "Descending" }, { "createdAt": "Ascending" }] }

All primitive field types in Gadget are sortable so you are able to sort by fields you have added to a model as well.

Sort Shopify Product Images by ID descending
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
sort: { id: "Descending" },
});
const [result, refresh] = useFindMany(api.shopifyProductImage, {
sort: { id: "Descending" },
});
const { data, error, fetching } = result;
1query FindManyShopifyProductImages($sort: [ShopifyProductImageSort!]) {
2 shopifyProductImages(sort: $sort) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{ "sort": { "id": "Descending" } }

Searching

Shopify Product Image records can be searched using Gadget's built in full text search functionality. Gadget search is appropriate for powering autocompletes, searchable tables, or other experiences where humans are writing search queries. It's typo tolerant, synonym aware and supports simple search operators like ! to exclude search terms.

Search Shopify Product Images by passing the search parameter with a search query string.

Search isn't field specific in Gadget -- all String or RichText field types are searched with the built in search functionality.

Full text search Shopify Product Images
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
search: "a specific phrase to search for",
});
const [result, refresh] = useFindMany(api.shopifyProductImage, {
search: "a specific phrase to search for",
});
const { data, error, fetching } = result;
1query FindManyShopifyProductImages($search: String) {
2 shopifyProductImages(search: $search) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{ "search": "a specific phrase to search for" }

Filtering

Shopify Product Image records can be filtered to return only the appropriate records. Records can be filtered on any field, including those managed by Gadget or fields added by developers. Filters can be combined with sorts, searches and paginated using cursor-based Relay pagination.

Filter Shopify Product Images by passing the filter parameter with a filter object. Filter objects are nestable boolean conditions expressed as JS objects capturing a key, an operator, and usually a value.

The GraphQL type ShopifyProductImageFilter defines which fields can be filtered on.

Records can be filtered by multiple different fields. If you want to combine filters using boolean logic, nest them under the AND, OR, or NOT keys of a parent filter. Filters can be nested deeply by passing multiple levels boolean condition filters.

You can also pass a list of filters to the filter parameter which will be implicitly ANDed with one another such that they all need to match for a record to be returned.

Available filters
GraphQL
1input ShopifyProductImageFilter {
2 AND: [ShopifyProductImageFilter]
3 OR: [ShopifyProductImageFilter]
4 NOT: [ShopifyProductImageFilter]
5 id: IDFilter
6 createdAt: DateTimeFilter
7 updatedAt: DateTimeFilter
8 state: StateFilter
9 height: FloatFilter
10 position: FloatFilter
11 product: IDFilter
12 shopifyCreatedAt: DateTimeFilter
13 source: StringFilter
14 shopifyUpdatedAt: DateTimeFilter
15 width: FloatFilter
16 shop: IDFilter
17}
Find Shopify Product Images created in the last day
const yesterday = new Date(Date.now() - 864e5);
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
filter: { createdAt: { greaterThan: yesterday } },
});
const yesterday = new Date(Date.now() - 864e5);
const [result, refresh] = useFindMany(api.shopifyProductImage, {
filter: { createdAt: { greaterThan: yesterday } },
});
const { data, error, fetching } = result;
1query FindManyShopifyProductImages($filter: [ShopifyProductImageFilter!]) {
2 shopifyProductImages(filter: $filter) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{ "filter": { "createdAt": { "greaterThan": "2023-01-31T11:58:51.160Z" } } }
Shopify Product Images created this week or updated today
1const yesterday = new Date(Date.now() - 86400000);
2const oneWeekAgo = new Date(Date.now() - 604800000);
3const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
4 filter: {
5 OR: [
6 {
7 createdAt: { greaterThan: oneWeekAgo },
8 },
9 {
10 updated: { greaterThan: yesterday },
11 },
12 ],
13 },
14});
1const yesterday = new Date(Date.now() - 86400000);
2const oneWeekAgo = new Date(Date.now() - 604800000);
3const [result, refresh] = useFindMany(api.shopifyProductImage, {
4 filter: {
5 OR: [
6 {
7 createdAt: { greaterThan: oneWeekAgo },
8 },
9 {
10 updated: { greaterThan: yesterday },
11 },
12 ],
13 },
14});
15const { data, error, fetching } = result;
1query FindManyShopifyProductImages($filter: [ShopifyProductImageFilter!]) {
2 shopifyProductImages(filter: $filter) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
1{
2 "filter": {
3 "OR": [
4 { "createdAt": { "greaterThan": "2023-01-25T11:58:51.160Z" } },
5 { "updated": { "greaterThan": "2023-01-31T11:58:51.160Z" } }
6 ]
7 }
8}
Filter records that are in the created state
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
filter: {
state: { inState: "created" },
},
});
1const [result, refresh] = useFindMany(api.shopifyProductImage, {
2 filter: {
3 state: { inState: "created" },
4 },
5});
6const { data, error, fetching } = result;
1query FindManyShopifyProductImages($filter: [ShopifyProductImageFilter!]) {
2 shopifyProductImages(filter: $filter) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{ "filter": { "state": { "inState": "created" } } }

Most field types in Gadget are filterable, so you are able to filter by fields you have added to a model as well.

const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
filter: {
id: { isSet: true },
},
});
1const [result, refresh] = useFindMany(api.shopifyProductImage, {
2 filter: {
3 id: { isSet: true },
4 },
5});
6const { data, error, fetching } = result;
1query FindManyShopifyProductImages($filter: [ShopifyProductImageFilter!]) {
2 shopifyProductImages(filter: $filter) {
3 edges {
4 node {
5 __typename
6 id
7 state
8 # ...
9 createdAt
10 updatedAt
11 }
12 }
13 }
14}
Variables
json
{ "filter": { "id": { "isSet": true } } }

Pagination

All Gadget record lists, including the top level Shopify Product Image finder as well as associations to Shopify Product Image, are structured as GraphQL connections. GraphQL connections are the de facto standard for querying lists and support cursor-based forward and backward pagination. When querying via GraphQL, you must select the edges field and then the node field to get the Shopify Product Image record. When querying using a Gadget API client, the GraphQL queries are generated for you and the records are unwrapped and returned as a GadgetRecordList ready for use.

Shopify Product Image pagination supports the standard GraphQL connection pagination arguments: first + after, or last + before. Pagination is done using cursors, which you can retrieve from the edge.cursor field or the pageInfo.startCursor properties.

Get the first page of 25 Shopify Product Images
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
first: 25,
});
console.log(shopifyProductImageRecords.length); //=> no greater than 25
const [result, refresh] = useFindMany(api.shopifyProductImage, { first: 25 });
const { data, error, fetching } = result;
console.log(data?.length); //=> no greater than 25
1query FindManyShopifyProductImages($first: Int, $after: String) {
2 shopifyProductImages(first: $first, after: $after) {
3 edges {
4 cursor
5 node {
6 __typename
7 id
8 state
9 # ...
10 createdAt
11 updatedAt
12 }
13 }
14 pageInfo {
15 endCursor
16 hasNextPage
17 hasPreviousPage
18 startCursor
19 }
20 }
21}
Variables
json
{ "first": 25 }

The after cursor used in this example data won't return any records if used in a real API request.

Next 25 Shopify Product Image records after cursor
const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
after: "abcdefg",
first: 25,
});
const [result, refresh] = useFindMany(api.shopifyProductImage, {
after: "abcdefg",
first: 25,
});
const { data, error, fetching } = result;
1query FindManyShopifyProductImages($first: Int, $after: String) {
2 shopifyProductImages(first: $first, after: $after) {
3 edges {
4 cursor
5 node {
6 __typename
7 id
8 state
9 # ...
10 createdAt
11 updatedAt
12 }
13 }
14 pageInfo {
15 endCursor
16 hasNextPage
17 hasPreviousPage
18 startCursor
19 }
20 }
21}
Variables
json
{ "first": 25, "after": "abcdefg" }

Pagination Limits

Root-level record finders like shopifyProductImages support a maximum page size of 250 records and a default page size of 50 records. The page size is controlled using the first or last GraphQL field arguments.

Related record finders that access lists of records through a has many or has many field support a maximum page size of 100 records and a default page size of 50 records.

Get the next or previous page

When using the generated JavaScript API client, including the api parameter in a Gadget code effect, the record lists returned from findMany calls can be paginated using the nextPage() or previousPage() option.

Both nextPage() and previousPage() will throw an error if the corresponding hasNextPage or hasPreviousPage is false.

JavaScript
1const shopifyProductImageRecords = await api.shopifyProductImage.findMany();
2if (shopifyProductImageRecords.hasNextPage) {
3 const nextPage = await shopifyProductImageRecords.nextPage();
4}
5if (shopifyProductImageRecords.hasPreviousPage) {
6 const prevPage = await shopifyProductImageRecords.previousPage();
7}

When using React and paging through records, you can use cursors to get the previous or next pages of records. This is an example of a React component that pages forward and backward through 2 records at a time for props.model.name.

React
1import { api } from "../api"; // your Gadget project's API Client
2import { useFindMany } from "@gadgetinc/react";
3import { useCallback, useState } from "react";
4
5export default function TestComponent() {
6 const NUM_ON_PAGE = 2; // the number of records per page
7
8 const [cursor, setCursor] = useState({ first: NUM_ON_PAGE });
9 // using Gadget React hooks to fetch records of shopifyProductImage
10 const [{ data, fetching, error }] = useFindMany(api.shopifyProductImage, {
11 ...cursor,
12 });
13
14 const getNextPage = useCallback(() => {
15 // use first + after to page forwards
16 setCursor({ first: NUM_ON_PAGE, after: data.endCursor });
17 }, [data]);
18
19 const getPreviousPage = useCallback(() => {
20 // use last + before to page backwards
21 setCursor({ last: NUM_ON_PAGE, before: data.startCursor });
22 }, [data]);
23
24 return (
25 <div>
26 <button onClick={getPreviousPage} disabled={!data?.hasPreviousPage}>
27 Previous page
28 </button>
29 <button onClick={getNextPage} disabled={!data?.hasNextPage}>
30 Next page
31 </button>
32 {!fetching && data.map((d) => <div>{d.id}</div>)}
33 </div>
34 );
35}

Get all records

If you need to get all available data for Shopify Product Image, you will need to paginate through all pages of data. If you have a large amount of data, this can take a long time. Make sure you need to collect all data at once before writing a pagination loop that reads all records! If you are querying records for display in a UI and cannot display all your records at once, we don't recommend fetching all the data beforehand - instead, use the cursor to read additional data when the user needs it.

If you need all data for analytics applications or to collect some statistics on your data, consider options like intermediate models and pre-defined data rollups.

If you have determined that you need all your data, you can fetch it using cursors and a loop. We also suggest using select so that you only grab fields that are needed, in addition to applying a filter, if possible. Using first with the maximum allowable value will also allow you to grab the maximum number of records you can at once.

Page through all records
JavaScript
1const allRecords = []; // use allRecords to store all records
2let records = await api.shopifyProductImage.findMany({
3 first: 250,
4 select: {
5 id: true,
6 },
7 filter: {
8 // add filter conditions, if possible
9 },
10});
11
12allRecords.push(...records);
13
14// loop through additional pages to get all protected orders
15while (records.hasNextPage) {
16 // paginate
17 records = await records.nextPage();
18 allRecords.push(...records);
19}

Selecting fields, and fields of fields

When using the JavaScript client, all of findOne, maybeFindOne, findMany, findFirst, maybeFindFirst, and various action functions, allow requesting specific fields of a Shopify Product Image and its relationships. The select option controls which fields are selected in the generated GraphQL query sent to the Gadget API. Pass each field you want to select in an object, with true as the value for scalar fields, and a nested object of the same shape for nested fields.

Gadget has a default selection that will retrieve all of the scalar fields for a Shopify Product Image. If you don't pass a select option to a record finder, this default selection will be used.

Select only some Shopify Product Image fields
1// fetch only the id, state, and createdAt field
2const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
3 select: { id: true, state: true, createdAt: true },
4});
5// fetch all the scalar fields for the model, but no relationship fields
6const shopifyProductImageRecords = await api.shopifyProductImage.findMany();
1// fetch only the id, state, and createdAt field
2const [result, refresh] = useFindMany(api.shopifyProductImage, {
3 select: { id: true, state: true, createdAt: true },
4});
5const { data, error, fetching } = result;
6// fetch all the scalar fields for the model, but no relationship fields
7const [result, refresh] = useFindMany(api.shopifyProductImage);
8const { data, error, fetching } = result;
Type Safety

The select option is fully type safe if you're using TypeScript. The returned GadgetRecord type will have a <Shape> exactly matching the fields and nested fields you selected. For more information, see Type Safety .

This behavior of selecting only some fields is built right into GraphQL. If you want to limit or expand what you retrieve from a GraphQL query, include or exclude those fields in your GraphQL query. For more information on executing GraphQL queries, see GraphQL.

Select nested Shopify Product Image fields
1// fetch the id, state, and createdAt field, and fetch some nested fields from an example relationship field named `someRelatedObject`
2const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
3 select: {
4 id: true,
5 state: true,
6 createdAt: true,
7 someRelatedObject: { id: true, createdAt: true },
8 },
9});
1// fetch the id, state, and createdAt field, and fetch some nested fields from an example relationship field named `someRelatedObject`
2const [result, refresh] = useFindMany(api.shopifyProductImage, {
3 select: {
4 id: true,
5 state: true,
6 createdAt: true,
7 someRelatedObject: { id: true, createdAt: true },
8 },
9});
10const { data, error, fetching } = result;

Combining parameters

Sort, search, filtering, selection, and pagination parameters can be combined to access the exact set of records needed for your use case.

Combining Parameters
1const shopifyProductImageRecords = await api.shopifyProductImage.findMany({
2 search: "<some search query>",
3 sort: { createdAt: "Descending" },
4 filter: { updatedAt: { greaterThan: new Date(Date.now() - 864e5) } },
5 select: { id: true, createdAt: true },
6 first: 25,
7 after: "abcdefg",
8});
1const [result, refresh] = useFindMany(api.shopifyProductImage, {
2 search: "<some search query>",
3 sort: { createdAt: "Descending" },
4 filter: { updatedAt: { greaterThan: new Date(Date.now() - 864e5) } },
5 select: { id: true, createdAt: true },
6 first: 25,
7 after: "abcdefg",
8});
9const { data, error, fetching } = result;
1query FindManyShopifyProductImages(
2 $after: String
3 $before: String
4 $first: Int
5 $last: Int
6 $search: String
7 $sort: [ShopifyProductImageSort!]
8 $filter: [ShopifyProductImageFilter!]
9) {
10 shopifyProductImages(
11 after: $after
12 before: $before
13 first: $first
14 last: $last
15 search: $search
16 sort: $sort
17 filter: $filter
18 ) {
19 edges {
20 cursor
21 node {
22 __typename
23 id
24 state
25 createdAt
26 height
27 position
28 shopifyCreatedAt
29 shopifyUpdatedAt
30 source
31 updatedAt
32 width
33 }
34 }
35 pageInfo {
36 endCursor
37 hasNextPage
38 hasPreviousPage
39 startCursor
40 }
41 }
42}
Variables
json
1{
2 "search": "<some search query>",
3 "sort": { "createdAt": "Descending" },
4 "filter": { "updatedAt": { "greaterThan": "2023-01-31T11:58:51.399Z" } },
5 "first": 25,
6 "after": "abcdefg"
7}

Invoking Actions

Shopify Product Image records are changed by invoking Actions. Actions are the things that "do" stuff -- update records, make API calls, call backend code, etc. Actions each have one corresponding GraphQL mutation and a corresponding function available in the API client libraries. Nested Actions can also be invoked with the API client, by providing the actions as input to any relationship fields.

Action Result format

Each API action returns results in the same format that includes a success indicator, errors, and the actual result if the action succeeded. The result is the record that was acted on for a model action, or a list of records for a bulk action, or a JSON blob for Global Actions. Model actions that delete the record don't return the record.

The success field returns a boolean indicating if the action executed as expected. Any execution errors are returned in the errors object, which will always be null if success is true or contain ExecutionError objects if success is false.

ExecutionError objects always have a message describing what error prevented the action from succeeding, as well as a code attribute that gives a stable, searchable, human readable error class code for referencing this specific error. Details on each error code can be found in the Errors documentation. All ExecutionError object types returned by the GraphQL object can be one of many types of error, where some types have extra data that is useful for remedying the error. All error types will always have message and code properties, but some, like InvalidRecordError have extra fields for use by clients.

Errors when using the generated client

The generated JavaScript client automatically interprets errors from invoking actions and throws JavaScript Error instances if the action didn't succeed. The Error objects it throws are rich, and expose extra error properties beyond just message and code if they exist.

Errors thrown by the JavaScript client are easiest to catch by using a try/catch statement around an await, like so:

JavaScript
1import {
2 GadgetOperationError,
3 InvalidRecordError,
4} from "@gadget-client/example-app";
5
6// must be in an async function to use `await` syntax
7const runAction = async () => {
8 try {
9 return await api.exampleModel.create({
10 exampleModel: { name: "example record name" },
11 });
12 } catch (error) {
13 if (error instanceof GadgetOperationError) {
14 // a recognized general error has occurred, retry the operation or inspect error.code`
15 console.error(error);
16 } else if (error instanceof InvalidRecordError) {
17 // the submitted input data for the action was invalid, inspect the invalid fields which `InvalidRecordError` exposes
18 console.error(error.validationErrors);
19 } else {
20 // an unrecognized error occurred, like an HTTP connection interrupted error or a syntax error. Re-throw it because it's not clear what to do to fix ti
21 throw error;
22 }
23 }
24};

For more information on error codes, consult the Errors documentation.

Shopify Product Image create

Input

create accepts the following input parameters:

create Input Data
1export interface CreateShopifyProductImageInput {
2 id?: (Scalars["GadgetID"] | null) | null;
3
4 height?: (Scalars["Float"] | null) | null;
5
6 position?: (Scalars["Float"] | null) | null;
7
8 product?: ShopifyProductBelongsToInput | null;
9
10 shopifyCreatedAt?: Date | Scalars["ISO8601DateString"] | null;
11
12 source?: (Scalars["String"] | null) | null;
13
14 shopifyUpdatedAt?: Date | Scalars["ISO8601DateString"] | null;
15
16 variants?: (ShopifyProductVariantHasManyInput | null)[];
17
18 width?: (Scalars["Float"] | null) | null;
19
20 shop?: ShopifyShopBelongsToInput | null;
21}
22
23export interface CreateShopifyProductImageArguments {
24 shopifyProductImage?: CreateShopifyProductImageInput | null;
25}
1input CreateShopifyProductImageInput {
2 id: GadgetID
3 height: Float
4 position: Float
5 product: ShopifyProductBelongsToInput
6 shopifyCreatedAt: DateTime
7 source: String
8 shopifyUpdatedAt: DateTime
9 variants: [ShopifyProductVariantHasManyInput]
10 width: Float
11 shop: ShopifyShopBelongsToInput
12}
13
14input CreateShopifyProductImageArguments {
15 shopifyProductImage: CreateShopifyProductImageInput
16}
Example create Invocation
1const shopifyProductImageRecord = await api.shopifyProductImage.create({
2 shopifyProductImage: {
3 // field values for Shopify Product Image
4 },
5});
6console.log(shopifyProductImageRecord.id); //=> a string
1const [result, createShopifyProductImage] = useAction(
2 api.shopifyProductImage.create
3);
4const { data, error, fetching } = result;
5await createShopifyProductImage({
6 shopifyProductImage: {
7 // field values for Shopify Product Image
8 },
9});
10console.log(data?.id); //=> a string
1mutation ($shopifyProductImage: CreateShopifyProductImageInput) {
2 createShopifyProductImage(shopifyProductImage: $shopifyProductImage) {
3 success
4 errors {
5 message
6 ... on InvalidRecordError {
7 validationErrors {
8 apiIdentifier
9 message
10 }
11 record
12 model {
13 apiIdentifier
14 }
15 }
16 }
17 shopifyProductImage {
18 __typename
19 id
20 state
21 createdAt
22 height
23 position
24 shopifyCreatedAt
25 shopifyUpdatedAt
26 source
27 updatedAt
28 width
29 }
30 }
31}
Variables
json
{ "shopifyProductImage": {} }
Output

create returns the Shopify Product Image. In the JS client, the fields returned can be controlled with the select option. In GraphQL, the return format is the action result format, which includes the record if the action was successful. You can include or exclude the fields you need right in the mutation itself.

create Output Data
type CreateShopifyProductImageResult {
success: Boolean!
errors: [ExecutionError!]
shopifyProductImage: ShopifyProductImage
}

Shopify Product Image update

Input

update operates on one Shopify Product Image in particular, identified by the id variable.update accepts the following input parameters:

update Input Data
1export interface UpdateShopifyProductImageInput {
2 id?: (Scalars["GadgetID"] | null) | null;
3
4 height?: (Scalars["Float"] | null) | null;
5
6 position?: (Scalars["Float"] | null) | null;
7
8 product?: ShopifyProductBelongsToInput | null;
9
10 shopifyCreatedAt?: Date | Scalars["ISO8601DateString"] | null;
11
12 source?: (Scalars["String"] | null) | null;
13
14 shopifyUpdatedAt?: Date | Scalars["ISO8601DateString"] | null;
15
16 variants?: (ShopifyProductVariantHasManyInput | null)[];
17
18 width?: (Scalars["Float"] | null) | null;
19
20 shop?: ShopifyShopBelongsToInput | null;
21}
22
23export interface UpdateShopifyProductImageArguments {
24 shopifyProductImage?: UpdateShopifyProductImageInput | null;
25}
1input UpdateShopifyProductImageInput {
2 id: GadgetID
3 height: Float
4 position: Float
5 product: ShopifyProductBelongsToInput
6 shopifyCreatedAt: DateTime
7 source: String
8 shopifyUpdatedAt: DateTime
9 variants: [ShopifyProductVariantHasManyInput]
10 width: Float
11 shop: ShopifyShopBelongsToInput
12}
13
14input UpdateShopifyProductImageArguments {
15 shopifyProductImage: UpdateShopifyProductImageInput
16}
Example update Invocation
1const shopifyProductImageRecord = await api.shopifyProductImage.update("some-id", {
2 shopifyProductImage: {
3 // field values for Shopify Product Image
4 },
5});
6console.log(shopifyProductImageRecord.id); //=> a string
1const [result, updateShopifyProductImage] = useAction(
2 api.shopifyProductImage.update
3);
4const { data, error, fetching } = result;
5await updateShopifyProductImage({
6 id: "some-id",
7 shopifyProductImage: {
8 // field values for Shopify Product Image
9 },
10});
11console.log(data?.id); //=> a string
1mutation ($id: GadgetID!, $shopifyProductImage: UpdateShopifyProductImageInput) {
2 updateShopifyProductImage(id: $id, shopifyProductImage: $shopifyProductImage) {
3 success
4 errors {
5 message
6 ... on InvalidRecordError {
7 validationErrors {
8 apiIdentifier
9 message
10 }
11 record
12 model {
13 apiIdentifier
14 }
15 }
16 }
17 shopifyProductImage {
18 __typename
19 id
20 state
21 createdAt
22 height
23 position
24 shopifyCreatedAt
25 shopifyUpdatedAt
26 source
27 updatedAt
28 width
29 }
30 }
31}
Variables
json
{ "id": "some-id", "shopifyProductImage": {} }
Output

update returns the Shopify Product Image. In the JS client, the fields returned can be controlled with the select option. In GraphQL, the return format is the action result format, which includes the record if the action was successful. You can include or exclude the fields you need right in the mutation itself.

update Output Data
type UpdateShopifyProductImageResult {
success: Boolean!
errors: [ExecutionError!]
shopifyProductImage: ShopifyProductImage
}

Shopify Product Image delete

The delete action destroys the record.

Input

delete operates on one Shopify Product Image in particular, identified by the id variable.

Example delete Invocation
await api.shopifyProductImage.delete("some-id");
1const [result, deleteShopifyProductImage] = useAction(
2 api.shopifyProductImage.delete
3);
4const { data, error, fetching } = result;
5await deleteShopifyProductImage({
6 id: "some-id",
7});
1mutation ($id: GadgetID!) {
2 deleteShopifyProductImage(id: $id) {
3 success
4 errors {
5 message
6 ... on InvalidRecordError {
7 validationErrors {
8 apiIdentifier
9 message
10 }
11 record
12 model {
13 apiIdentifier
14 }
15 }
16 }
17 }
18}
Variables
json
{ "id": "some-id" }
Output

delete deletes the record, so it returns void in the JS client. In GraphQL it returns only the success and errors from the action result format.

delete Output Data
type DeleteShopifyProductImageResult {
success: Boolean!
errors: [ExecutionError!]
}

Linking to an Existing Child Record

During a create or update operation, you can link to existing child records simply by nesting the data structure on your operation, using an update object wrapper around the child record's properties.

Existing nested child
1const shopifyProductRecord = await api.shopifyProduct.create({
2 shopifyProduct: {
3 body: "bodyValue",
4 images: {
5 // Updates existing `shopifyProductImage` record
6 // (`id` of record required),
7 // and links it to shopifyProduct.
8 update: {
9 id: "123",
10 height: "imagesHeightValue",
11 },
12 },
13 },
14});
15console.log(shopifyProductRecord.id); //=> a string
1const [result, createShopifyProduct] = useAction(api.shopifyProduct.create);
2const { data, error, fetching } = result;
3await createShopifyProduct({
4 shopifyProduct: {
5 body: "bodyValue",
6 images: {
7 // Updates existing `shopifyProductImage` record
8 // (`id` of record required),
9 // and links it to shopifyProduct.
10 update: {
11 id: "123",
12 height: "imagesHeightValue",
13 },
14 },
15 },
16});
17console.log(data?.id); //=> a string
1mutation ($shopifyProduct: CreateShopifyProductInput) {
2 createShopifyProduct(shopifyProduct: $shopifyProduct) {
3 success
4 errors {
5 message
6 }
7 shopifyProduct {
8 id
9 body
10 images {
11 id
12 }
13 }
14 }
15}
Variables
json
{
"body": "bodyValue",
"images": { "update": { "id": "123", "height": "imagesHeightValue" } }
}

Linking to a New Child Record

During a create or update operation, you can create linked child records simply by nesting the data structure on your operation, using a create object wrapper around the child record's properties.

New nested child
1const shopifyProductRecord = await api.shopifyProduct.create({
2 shopifyProduct: {
3 body: "bodyValue",
4 images: {
5 // Creates `shopifyProductImage` record,
6 // linked to shopifyProduct.
7 create: {
8 height: "imagesHeightValue",
9 },
10 },
11 },
12});
13console.log(shopifyProductRecord.id); //=> a string
1const [result, createShopifyProduct] = useAction(api.shopifyProduct.create);
2const { data, error, fetching } = result;
3await createShopifyProduct({
4 shopifyProduct: {
5 body: "bodyValue",
6 images: {
7 // Creates `shopifyProductImage` record,
8 // linked to shopifyProduct.
9 create: {
10 height: "imagesHeightValue",
11 },
12 },
13 },
14});
15console.log(data?.id); //=> a string
1mutation ($shopifyProduct: CreateShopifyProductInput) {
2 createShopifyProduct(shopifyProduct: $shopifyProduct) {
3 success
4 errors {
5 message
6 }
7 shopifyProduct {
8 id
9 body
10 images {
11 id
12 }
13 }
14 }
15}
Variables
json
{ "body": "bodyValue", "images": { "create": { "height": "imagesHeightValue" } } }

Linking to an Existing Parent Record

When you wish to link to an existing parent record, you must use a _link property in your data, with the id of the parent record that this child record will belong to.

Linked creation
1const shopifyProductImageRecord = await api.shopifyProductImage.create({
2 shopifyProductImage: {
3 height: "heightValue",
4 product: {
5 _link: "123",
6 },
7 },
8});
9console.log(shopifyProductImageRecord.id); //=> a string
1const [result, createShopifyProductImage] = useAction(
2 api.shopifyProductImage.create
3);
4const { data, error, fetching } = result;
5await createShopifyProductImage({
6 shopifyProductImage: {
7 height: "heightValue",
8 product: {
9 _link: "123",
10 },
11 },
12});
13console.log(data?.id); //=> a string
1mutation ($shopifyProductImage: CreateShopifyProductImageInput) {
2 createShopifyProductImage(shopifyProductImage: $shopifyProductImage) {
3 success
4 errors {
5 message
6 }
7 shopifyProductImage {
8 id
9 height
10 product {
11 id
12 }
13 }
14 }
15}
Variables
json
{ "height": "heightValue", "product": { "_link": "123" } }

Linking to a New Parent Record

You cannot directly link to a new parent record when creation a child record. However, you can jointly create both parent and child via the Linking to a New Child Record method.

Bulk Actions

Actions that support it can be performed in bulk. Bulk Actions are executed as a single GraphQL mutation and have a corresponding function available in the API client libraries. Bulk Actions are performed on a set of ids. Bulk Actions repeat the same action, with the same options and parameters, across all ids and should not be confused with batching up different actions in the same request.

Bulk Actions will be performed on the entire set. If an action fails on an individual record, the Bulk Action will still occur on the other records in the set. Only the records which completed the action successfully will be returned.

Bulk Shopify Product Image delete

bulkDeleteShopifyProductImages action destroys the records.

Input

bulkDeleteShopifyProductImages operates on a set of Shopify Product Images, identified by the ids variable.

Example bulkDeleteShopifyProductImages Invocation
await api.shopifyProductImage.bulkDelete(["some-id", "another-id"]);
const [shopifyProductImageResult, bulkDelete] = useBulkAction(
api.shopifyProductImage.bulkDelete
);
const { data, error, fetching } = result;
await bulkDelete({ ids: ["some-id", "another-id"] });
1mutation ($ids: [GadgetID!]!) {
2 bulkDeleteShopifyProductImages(ids: $ids) {
3 success
4 errors {
5 message
6 }
7 }
8}
Variables
json
{ "ids": ["some-id", "another-id"] }
Output

bulkDeleteShopifyProductImages deletes the record, so it returns void in the JS client. In GraphQL it returns only the success and errors from the action result format.

bulkDeleteShopifyProductImages Output Data
type BulkDeleteShopifyProductImagesResult {
success: Boolean!
errors: [ExecutionError!]
}