Deprecation of Operation.operationName

[danielsyang]

Hey,

I'm checking out this library for the first time and I'm currently using React-Native + Urql in my project.
However I'm facing a warning about a deprecation of a property called Operation.operationName and it says I should use Operation.kind instead.
I'm having a hard time trying to figure out why it's happening since I generated my queries using codegen

generates:
  generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-urql"

So I really don't know where to start debugging this to begin with since I'm pretty much just querying in the most simple way

  const [result] = useSendTwilioSmsCodeQuery({
    variables: { cellphone: { number: getValues().cellphone } },
    pause: getValues().cellphone === "",
  })

and this is my query:

query SendTwilioSmsCode($cellphone: Cellphone!) {
  sendSMSCodeToTwilio(cellphone: $cellphone)
}

and these are the versions of all libraries that I'm using

    "react-native": "0.63.3",
    "urql": "^1.11.4",
    "graphql": "^15.4.0",

Thank you all

[kitten]

Hiya 👋
This is just a temporary warning as we've indeed renamed the field recently. Do you have some traces around where it's been logged? That'll usually give me some info to tell you where it's coming from.

Either way you can ignore the warning though. We're also considering to just remove it until the removal of the field, since the warning misfires on shallow copies or debug prints of operations.

[danielsyang]

Hey @kitten 👋
Thanks for you answer.
Yes, so the traces I've got are these:

[Thu Dec 31 2020 11:38:34.416]  WARN     [WARNING: Deprecated] The "Operation.operationName" property has been deprecated and will be removed in a future release of urql. Use "Operation.kind" instead. 
Modal@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:178977:25
RegisterForm@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:171876:36
FormProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:138627:22
RCTView
RegisterContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:171797:46
RCTView
RCTSafeAreaView
SafeAreaView
BVLinearGradient
LinearGradient@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:139409:36
SafeArea@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:139309:24
RegisterScreen
StaticContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:126350:17
EnsureSingleNavigator@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:125050:24
SceneView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:126265:22
RCTView
RCTView
RCTView

It happens exactly inside my modal where my custom hook is located at.
But I noticed that after I changed my implementation to not initially mount the modal when the modal isn't visible that warning just went away.

{isModalOpen && (
        <CellphoneValidationModal
          isVisible={isModalOpen}
          closeModal={() => setCellphoneValidationStatus(false)}
        />
      )}

So I think that was my fault hehe

[kitten]

Could it have been a stray console.log or something of the likes? The dev tools currently also trigger this warning I think 🤔

either way, I'm pretty convinced that we'll have to do something about this 😅