Skip to content
This repository has been archived by the owner on Nov 11, 2023. It is now read-only.

Generate useMutate components #126

Merged
merged 5 commits into from
May 17, 2019
Merged

Conversation

fabien0102
Copy link
Contributor

Why

All the power of this library is the open-api generation, this permit to have auto-completion of our backend api directly in react.
I have the honor to introduce useMutate part of this auto-generation! now every route can be generate and use with hooks 🎉

Example

For the following spec:

post:
      description: Creates a new pet in the store.  Duplicates are allowed
      operationId: addPet
      requestBody:
        description: Pet to add to the store
        required: true
        content:
          application/json:
            schema:
              $ref: "#/components/schemas/NewPet"
      responses:
        "200":
          description: pet response
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Pet"
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Error"

I will have the following components generated:

export type AddPetProps = Omit<MutateProps<Pet, Error, void, NewPet>, \\"path\\" | \\"verb\\">;


export const AddPet = (props: AddPetProps) => (
  <Mutate<Pet, Error, void, NewPet>
    verb=\\"POST\\"
    path={\`/pets\`}
    {...props}
  />
);

export type UseAddPetProps = Omit<UseMutateProps<Pet, void>, \\"path\\" | \\"verb\\">;


export const useAddPet = (props: UseAddPetProps) => useMutate<Pet, Error, void, NewPet>(\\"POST\\", \`/pets\`, props);

So I can do in my application:

import { useAddPet } from "./petstore-generated";

const App = () => {
  const {mutate: addPet, loading, error} = useAddPet();

  return (<div>
     {loading && <div>Loading…</div>}
     {error && <div>{error.message}</div>}
    <button onClick={() => addPet({name: "Medor"})}>Add a pet</button>
  </div>)
};

This is of course fully typesafe, and you have autocompletion on addPet({name: "Medor"}) 💯

Validator

I also use this branch to continue on our goal to improve the quality and strictness of our specifications.

Now, https://github.com/IBM/openapi-validator is integrate by default, and we can just add a .validaterc in any project to configure the openapi linter 😈

Note: This validator is really strict! I've added a --no-validation flag to be able to have a more smooth migration to this dream 😅

@fabien0102 fabien0102 self-assigned this May 17, 2019
@@ -16,7 +16,10 @@ export interface States<TData, TError> {
error?: GetState<TData, TError>["error"];
}

export type MutateMethod<TData, TRequestBody> = (data?: TRequestBody) => Promise<TData>;
export type MutateMethod<TData, TRequestBody> = (
data: TRequestBody,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data is not anymore optional, so we can define string for DELETE operation.
This is to have a bit more type safety, mutate() is not possible anymore if a body is required.

@contiamo-ci
Copy link

Warnings
⚠️

❗ Big PR

Generated by 🚫 dangerJS

@@ -0,0 +1,21 @@
declare module "ibm-openapi-validator" {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sad that it's not TS.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we contribute this to @DefinitelyTyped?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

24 stars on github, I've tried but without a lot of hope 😅 I will contribute to definitelyTyped to add this later.

@@ -0,0 +1,21 @@
declare module "ibm-openapi-validator" {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we contribute this to @DefinitelyTyped?

*/
const validate = async (schema: OpenAPIObject) => {
// tslint:disable:no-console
const log = console.log;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe export this from that other place you do it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's more have only one no-console, I prefer to not export this hack ^^ So you need to ask yourself "is it a real usecase or just a console.log for debugging?"

),
);
}
// tslint:enable:no-console
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled the no-console rule for the block, so I re-enable it ^^

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

TejasQ
TejasQ previously approved these changes May 17, 2019
Copy link
Contributor

@TejasQ TejasQ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's great for a first iteration! Let's publish on next and use it 😍

@TejasQ TejasQ merged commit 803ec96 into master May 17, 2019
@fabien0102 fabien0102 deleted the use-mutate-open-api-generation branch May 17, 2019 16:12
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants