j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
XML 設定ファイルの要素
HTML テンプレートディレクティブ
HTML テンプレートエラー
デコレータ
@salesforce モジュール
graphql
refreshGraphQL(result)
ページネーション
子と親のリレーション
PageReference の型
graphql
GraphQL ワイヤアダプタは、Lightning データサービス (LDS) を使用してデータを管理します。他のワイヤアダプタとは異���り、GraphQL スキーマで定義されたクエリごとに異なるワイヤアダプタは必要ありません。代わりに LDS は単一の対応付けワイヤアダプタを提供���ており、GraphQL クエリドキュメントと変数の対応付けが可能です。
GraphQL ワイヤアダプタは、Salesforce GraphQL API スキーマを使用するため、UI API 対応のオブジェクトを現在のユーザのオブジェクトレベルのセキュリティと項目レベルのセキュリティで利用できるようになります。UI API は、ページ設定に対して GraphQL Cursor Connections Specification (GraphQL カーソル接続仕様) をサポートしています。
GraphQL API スキーマを調べるには、Altair GraphQL クライアントを使用してイントロスペクションからスキーマのドキュメントを確認することをお勧めします。このクライアントでは、項目のオートコンプリート機能を備えたクエリエディタが提供されており、任意の Salesforce オブジェクトに特定の種別の項目を簡単に追加できます。クエリを迅速かつ正確に作成するために、このクライアントを使用することをお勧めします。
構文
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/uiGraphQLApi";
export default class MyGQLQuery extends LightningElement {
@wire(graphql, {
query: gql`
query AccountInfo {
uiapi {
query {
Account(where: { Name: { like: "Account1" } }) {
edges {
node {
Name {
value
displayValue
}
}
}
}
}
}
}
}`,
})
propertyOrFunction;
}GraphQL API リソース
POST /graphqlGraphQL ワイヤアダプタは、この GraphQL API リソースを使用します。
パラメータ
-
query— (必須) 解析された GraphQL クエリ。gqlJavaScript テンプレートリテラル関数を使用してクエリを解析します。gqlは、GraphQL クエリをワイヤアダプタが使用できる形式に解析します。gqlは、リアクティブではありません。 -
variables—gqlクエリの動的な値のキー - 値ペア。ワイヤアダプタが変化に反応できるようにvariablesを getter 関数で使用します。Note
変数に渡される値は、デフォルト値が指定されていないクエリのすべての変数の値を含む対応付けである必要があります。
:::
operationName— クエリで実行する操作の名前。GraphQL クエリで複数の操作が定義されている場合、operationNameを使用して実行する操作を選択します。さまざまな GraphQL の要求を識別できるようにするサーバ側でのデバッグを改善するために、短縮構文のqueryを使用するのではなく、query operationNameによってクエリにラベル付けすることをお勧めします。例えば、query bigAccountsまたはquery serviceReportsのようにします。
戻り値
data— GraphQL API 応答errors— GraphQL API エラー
GraphQL 応答仕様との互換性を維持するため、GraphQL ワイヤアダプタでは他の LWC ワイヤアダプタとは異なり error の代わりに errors が使用されます。
Note
使用方法
ワイヤアダプタの使用を開始するには、識別子をインポートし、コンポーネントのプロパティの設定を指定します。gql 関数を使用してクエリを渡します。
// simpleAccounts.js
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/uiGraphQLApi";
export default class SimpleGQL extends LightningElement {
results;
errors;
@wire(graphql, {
query: gql`
query AccountWithName {
uiapi {
query {
Account(first: 10) {
edges {
node {
Id
Name {
value
}
}
}
}
}
}
}
}`,
})
graphqlQueryResult({ data, errors }) {
if (data) {
this.results = data.uiapi.query.Account.edges.map((edge) => edge.node);
}
this.errors = errors;
}
}この HTML テンプレートは、クエリで返された最初の 10 個の取引先名を表示します。
<!-- simpleAccounts.html -->
<template>
<div class="slds-var-m-horizontal_medium">
<template lwc:if={results}>
<template for:each={results} for:item="account">
<div key={account.Id}>
<lightning-card icon-name="standard:account">
<h1 slot="title">{account.Name.value}</h1>
</lightning-card>
</div>
</template>
</template>
</div>
</template>リアクティビティを加えるために、variables パラメータに値を渡し、戻り値用の getter を作成します。
getter 関数を使用することで、GraphQL ワイヤアダプタが minAmount の変更に反応するようになります。
例では、$minAmount 変数に Currency 型が宣言されています。Currency は、Salesforce GraphQL API スキーマの型を参照します。Currency 型は、未加工の値です (例、1000)。この場合、1,000 のような書式の値を渡すことはできません。ユーザが異なる金額を選択すると、handleMinAmountChange イベントハンドラによってクエリが更新されます。
// accountsMinAmount.js
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/uiGraphQLApi";
export default class AccountsGQL extends LightningElement {
records;
errors;
minAmount = "50000000";
minAmounts = [
{ label: "All", value: "0" },
{ label: "$5,000,000", value: "5000000" },
{ label: "$50,000,000", value: "50000000" },
{ label: "$500,000,000", value: "500000000" },
];
@wire(graphql, {
query: gql`
query bigAccounts($minAmount: Currency) {
uiapi {
query {
Account(where: { AnnualRevenue: { gte: $minAmount } }) {
edges {
node {
Id
Name {
value
}
AnnualRevenue {
displayValue
}
}
}
}
}
}
}
}`,
// Use a getter function (see get variables() below)
// to make the variables reactive.
variables: "$variables",
// The operation name is optional
// since the GraphQL query defines a single operation only.
operationName: "bigAccounts",
})
graphqlQueryResult({ data, errors }) {
if (data) {
this.records = data.uiapi.query.Account.edges.map((edge) => edge.node);
}
this.errors = errors;
}
get variables() {
return {
minAmount: this.minAmount,
};
}
handleMinAmountChange(event) {
this.minAmount = event.detail.value;
}
}この HTML テンプレートでは、最小金額を選択し、照会した取引先を表示できます。
<!-- accountsMinAmount.html -->
<template>
<div class="slds-var-m-horizontal_medium">
<lightning-combobox
name="minAmount"
label="Amount"
value={minAmount}
placeholder="Select a minimum amount"
options={minAmounts}
onchange={handleMinAmountChange}
>
</lightning-combobox>
<template lwc:if={records}>
<template for:each={records} for:item="account">
<div class="card-spacer" key={account.Id}>
<lightning-card icon-name="standard:account">
<h1 slot="title">{account.Name.value}</h1>
{account.AnnualRevenue.displayValue}
</lightning-card>
</div>
</template>
</template>
</div>
</template>Salesforce の多くの項目は、value、displayValue、format 項目によって、未加工値とオブジェクトに対応付けられます。Altair GraphQL クライアントを使用して、スキーマのドキュメントを確認することをお勧めします。
既知の制限
現在、GraphQL API ワイヤアダプタでは次の使用事例はサポートされていません。
- Experience Cloud サイト
- 別のコンポーネントからのフラグメントの参照など、実行時の GraphQL クエリの動的作成
${}を使用した文字列の補間構造@skipや@includeなどのディレクティブでの変数の使用
GraphQL API 機能が、ワイヤアダプタで利用できるようになるまでに数回のリリースがかかる可能性があります。「GraphQL Wire Adapter Limitations (GraphQL ワイヤアダプタの制限)」を参照してください。
また、GraphQL クエリが Salesforce モバイルアプリケーション、Salesforce Field Service、または Mobile Offline で事前取得に失敗した場合は、参照整合性とプライミング機能を維持するために、GraphQL クエリで metaschema ディレクティブを引き続き使用する必要があります。Known Issue (既知の問題) の「GraphQL query fails prefetch with an "Unknown Field" warning (「不明な項目」の警告により GraphQL クエリが事前取得に失敗する)」 を参照してください。
関連トピック
- GraphQL API Developer Guide (GraphQL API 開発者ガイド): Use GraphQL API with Lightning Web Component (Lightning Web コンポーネントでの GraphQL API の使用)
The Japanese Summer '24 guide is now live
jNo Results
Search Tips:
- Please consider misspellings
- Try different search keywords