typescript-react-apollo should also generate SDK

[cyberhck]

Hey everyone,
I'm very new to this project and I'm having an issue.

I have some scenario where I need to make an API call outside of a react components (example: callbacks, async validation etc)

while callbacks can just use the lazy version, it's still not good, currently it returns the data back to original components.

I'm looking for a way to use something like graphql-request but with apollo client, because I still want the hooks, but I want additional operations support.

Is that already possible? or is my only hope to have two graphql client in a single project?

I could use the typescript-generic-sdk, apollo client being so popular I was hoping I could just set a flag which also generates SDK on typescript-react-apollo plugin.

Am I missing something? Any help would be appreciated :)

Thanks in advance.

[ardatan]

React Apollo plugin has a completely different approach comparing to generic-sdk. One generates React hooks and the other one generates vanilla-js framework independent functions/methods that return Promises or AsyncIterables.
Generated SDK by generic-sdk plugin can take any kind of "sdkRequester" so you can call any client under the hood.

[cyberhck]

I'm using Yup to validate a schema, for one of the validations, I'll need to call my graphql server.

Now because this is in a separate call, I'll need non-hook way to call SDK, but I don't want to type:

const client = useApolloClient();
client.query<ValidateSomethingQuery, ValidateSomethingVariables>({query: ValidateSomethingDocument, variables: {value: "something"});

what I'd like to type:

const sdk = getSdk(useApolloClient());
const response = await sdk.validateSomething({value: "something"});

Second is much easier to use.

[dotansimha]

Why not just:

const response = useValidateSomething({value: "something"});

// useValidateSomething is generated from typescript-react-apollo

?

[cyberhck]

https://formik.org/docs/guides/validation

Because I use yup validation.

Yup validation let's you add a test function which can return a promise.

Which isn't inside a react component, but a separate .ts file.

[cyberhck]

I also want my business logic kind of separate from my UI logic, while hooks do have their places in Container Components, I'm not using them everywhere, I'm handling the data using react-query. I'm not completely abandoning them either, in some pages where I have no use for react-query, I'm still making those API calls using hooks.

[cyberhck]

for cases where people want to use apollo client without a framework (vanillaJS OR with react but without hooks), I've added #6246