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;
}
POST /graphql
GraphQL ワイヤアダプタは、この GraphQL API リソースを使用します。
query
— (必須) 解析された GraphQL クエリ。gql
JavaScript テンプレートリテラル関数を使用してクエリを解析します。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 ワイヤアダプタでは次の使用事例はサポートされていません。
${}
を使用した文字列の補間構造@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 クエリが事前取得に失敗する)」 を参照してください。
関連トピック
The Japanese Summer '24 guide is now live