これが出たら[apollo x react] writeToStore.ts?f824:194 Missing field [FIELD_NAME] in

writeToStore.ts?f824:194 Missing field [FIELD_NAME] in

subscribeでupdate関数内で更新したオブジェクトを返すとcache側で識別できないのでエラーになっている

Observable.js?a7b2:63 Uncaught Error: Store error: the application attempted to write an object with no provided typename but the store already contains an object with typename of MessageConnection for the object of id $ROOT_QUERY.messages({"messageThreadId":"04140231-6c68-4396-bd5b-58c5fece5e51"}). The selectionSet that was trying to be written is:

messages(messageThreadId: $id) {
  nodes {
    id
    message
    createdAt
    account {
      id
      lastName
      firstName
      __typename
    }
    __typename
  }
  __typename
}

at StoreWriter.writeFieldToStore (writeToStore.ts?f824:368)

以前の状態と今回アップでーとして、マージして作って返す瞬間のオブジェクトをみてください

キャッシュに対しての型が合っていないため怒られています。 __typenameは正規化されたデータを一意に識別するために必要なもので、キャッシュをアップデートする際にidや _idと共に使用するためのものです。サーバーから返された時にデフォルト設定では付いてきます。その返ってきた値をcacheに保存しているわけですが

手動でupdateする際には型を合わせないとなりませんそこで識別する__typenameがないぞといわれているので、サーバーから返ってきた値がどのようにキャッシュされているのかみてみるとわかります

Video is
Check where the error is coming out
* comform cache with chrome devtools *
`console tab in chrome`->` __APOLLO_CLIENT__`-> `cache`->` data`-> `your oparatorname`->
Check `__typename` in

Fix the code
Update the page
Press the button the subscription was implemented
Confirming that the error has disappeared

動画はエラーが出ているところを確認して

comform cache with chrome devtools

console tab in chrome -> __APOLLO_CLIENT__ -> cache -> data -> your oparatorname ->

で__typenameを確認して

コードを修正ページ更新して subscriptionが実装されたボタンを押してエラーが消えたことを確認しています

updateQuery: (prev, arg) => {
  if (arg.subscriptionData.data.messagePublished.id === prev.messages.nodes[0].id) return prev;
  const obj = {
    messages: {
      nodes: [
        arg.subscriptionData.data.messagePublished,
        ...prev.messages.nodes,
      ],
    },
  };
  return obj;
}

updateQuery: (prev, arg) => {
  if (arg.subscriptionData.data.messagePublished.id === prev.messages.nodes[0].id) return prev;
  const obj = {
    messages: {
      nodes: [
        arg.subscriptionData.data.messagePublished,
        ...prev.messages.nodes,
      ],
      __typename: 'MessageConnection' //add __typename
    },
  };
  return obj;
}

author

kenmori/writeToStore.ts?f824:194 Missing field [FIELD_NAME] in.md

writeToStore.ts?f824:194 Missing field [FIELD_NAME] in