GraphQLを用いて顧客のメタフィールド（日付と時刻のリスト）を更新したい

[遼太]

GraphQLを用いた顧客メタフィールドの更新について質問があります。

行いたいこと

GraphQLのmutationを用いて顧客のメタフィールド（コンテンツタイプ：日付と時刻のリスト）を変更したいです。

　そのために必要な要素を箇条書きすると下記のようになりました。

1. メタフィールドの値の取得 
2. 扱いやすい形への整形（String→array）
3. 新たなタイムスタンプの追加（pushを行う）
4. リクエストに対する適切な形への整形

問題点

クエリを用いてメタフィールドの値を取得できましたが下記のようにString型で返ってきているため、変更が行いづらく、なんとか配列の形に変更を行いました。

その後、新しいタイムスタンプをpushして、リクエストとして適切な形へと変更を行いましたが、値の更新が行えていません。

現状

他のメタフィールドの値の更新（真偽値や一つのタイムスタンプ）は問題なく行えているため、アクセス権限が原因である可能性は限りなく低いと思っております。個人的に上記の1~3の処理は問題ないと思っておりまして、問題は4の処理だと考えております。

ソースコード

//metafieldの取得結果
"[\"2022-09-29T02:30:00Z\",\"2022-10-02T02:31:36.211Z\"]"

//replaceとsplitを用いた配列へ変形処理を行う
TimeListValue = TimeListValue. Replace("[", "").replace("]", "").replace(/[\"]/g, "").split(",");
//TimeListValueの出力結果　変形成功
[ '2022-09-29T02:30:00Z', '2022-10-05T04:55:13.336Z' ]

//新しいタイムスタンプを上記の配列にpushする。
let date = new Date()
date = date.toISOString()
TimeListValue. Push(date)
//配列をリクエストとして適切な形に変形する処理。
const newArray = TimeListValue.map((arr)=>{
const test = '\"' + arr + '\"'
return test
}
const newTimeList = newArray.join(",\\");

//newTimeListの出力結果
"2022-09-29T02:30:00Z\",\"2022-10-05T05:40:19.145Z\"
//mutationのvariable 
const mutatinonTimeVariable = {
  input:{
   id:customerId,//別で取得済み　顧客id
   metafields: [
    { id:TimeMetafieldId,//別で取得済み metafieldのid
      value:`"[\\${newTimeList}]"`,},
   ],
},
};

const mutationTime = `
mutation($input:CustomerInput!){
customerUpdate(input:$input){
 customer {
 lastName
 firstName
 metafield(key:"_timeList" namespace:"custom"){
  value
  key
}
}
}
}`;  
//shopify-api-nodeを使ったgraphql操作 第一引数　操作内容　第二引数　variable
shopify.graphql(mutationTime,mutationTimeVariable);

 shopify.graphql(mutationTimeQuery, mutationTimeVariable);

実行環境

node　v16.16.0

shopify-api-node: 3.11.2

上記の環境で他のメタフィールドの値更新は行えているため実行環境は関係ないと思いますが、念のため記載させていただきます。

当該エラーの解決方法や代替策等がございましたら教えて頂きたく存じます。

何卒よろしくお願い致します。

[Qcoltd]

貼っていただいたGraphQLクエリで、

Postmanからカスタムアプリを介して、

メタフィールドの日付リストの更新を行ってみたところ、

問題なく、日付リストを更新できましたので、

質問者様がおっしゃるように、

リクエストの整形に問題があるのかもしれません。

少し気になった点として、

//newTimeListの出力結果
"2022-09-29T02:30:00Z\",\"2022-10-05T05:40:19.145Z\"

こちらに、先頭のバックスラッシュがないようです。

雑ですが、こちらを、

const newTimeList = newArray.join(",\\");

下記のようにされてはいかがでしょうか？

const newTimeList = "\\" + newArray.join(",\\");

ご参考まで。

(キュー田辺)

[Qcoltd]

@遼太 さま

失礼しました。

下記で、バックスラッシュは補完されていますね。

      value:`"[\\${newTimeList}]"`,},

もう少し確認してみます。

(キュー田辺)

[Qcoltd]

@遼太 さま

こちらのコードを、

const newArray = TimeListValue.map((arr)=>{
const test = '\"' + arr + '\"'
return test
}
const newTimeList = newArray.join(",\\");

//newTimeListの出力結果
"2022-09-29T02:30:00Z\",\"2022-10-05T05:40:19.145Z\"
//mutationのvariable 
const mutatinonTimeVariable = {
  input:{
   id:customerId,//別で取得済み　顧客id
   metafields: [
    { id:TimeMetafieldId,//別で取得済み metafieldのid
      value:`"[\\${newTimeList}]"`,},
   ],
},
};

下記のようにされてはいかがでしょうか？

const newArray = TimeListValue.map((arr)=>{
const test = "\\\"" + arr + "\\\""
return test
}
const newTimeList = newArray.join(",");

//newTimeListの出力結果
"2022-09-29T02:30:00Z\",\"2022-10-05T05:40:19.145Z\"
//mutationのvariable 
const mutatinonTimeVariable = {
  input:{
   id:customerId,//別で取得済み　顧客id
   metafields: [
    { id:TimeMetafieldId,//別で取得済み metafieldのid
      value:`"[${newTimeList}]"`,},
   ],
},
};

console.logで出力を細かく確認してみたところ、

元のコードですと、

newTimeListが下記のように出力されました。

"2022-09-29T02:30:00Z",\"2022-10-02T02:31:36.211Z",\"2022-10-11T12:45:55.627Z"

"Z"の後のダブルクォーテーションにバックスラッシュがなく、

エスケープできていないように見受けられました。

なぜ、mapで加えた \" が消失してしまうのかは分からなかったのですが、

const test = '\"' + arr + '\"'

 質問者様も下記のように、join時に、,\\とされていたことから、

const newTimeList = newArray.join(",\\");

 mapで加えた\"がなくってしまうことにはお気づきになっていたように見受けられました。

ご参考まで。

(キュー田辺)

[遼太 · Accepted solution]

田辺様

返信遅くなってしまい大変申し訳ありません。丁寧な解説と親身に問題に寄り添っていただき非常に心強かったです。エラーの対応していただき、誠にありがとうございます。

エラーの件ですが、結論から申し上げますと田辺様から教えていただいたコードですと残念ながら解決することが出来ませんでした。

ただ自分で試行錯誤する中でエラーを解決することが出来ました。

今後同じエラーに遭遇するかもしれない方のために解決方法を共有させて頂きます。

       TimeListValue = JSON.parse(TimeListValue)
       TimeListValue.push(date);
       TimeListValue = JSON.stringify(TimeListValue)

　　　　 const mutationTimeVariable = {
            input: {
              id: customerId,
              metafields: [
                {
                  id: TimeMetafieldId,
                  value:TimeListValue
                },
              ],
            },
          };

上記のコードが主な改善点です。

 受け取ったデータをparse処理を行い、整形しタイムスタンプをpushいたしました。

その後新たなデータをJSON.stringify()することにより成功いたしました。

[Qcoltd]

@遼太 さま

うまく動作したコードの共有ありがとうございます。

また、私のコードではうまくいかなかったとのこと失礼いたしました。

そうですね、JSONメソッドを利用すれば間違いなかったですね。

もし、お手間でなければ、ご自身の投稿をベストソリューションにしていただけると、

同様のお悩みを持つ方が、こちらの投稿にたどり着いた際に、

すぐに回答にアクセスできて良いかとおもいます。

よろしくお願いいたします。

(キュー田辺)