1.1.16 • Published 12 months ago

graphiql-codegen v1.1.16

Weekly downloads
-
License
-
Repository
-
Last release
12 months ago

GraphiQL-Codegen

A graphical, interactive in-browser GraphQL IDE for code generation.

User Guide

  1. Run the Application:

    npx run graphiql-codegen
    
    This starts the localhost at port 3241 and the backend at port 4321.
  2. Enter the cURL: In the modal that opens up, paste the cURL.

Features

  1. Create Queries and Mutations: Easily create queries and mutations by clicking on the schema fields.

    Using endpoint https://graphql.api.apollographql.com/api/graphql for demonstration purposes.

    View All Mutations: Select mutation and then click the + button to see all mutations.

  2. Generate Response: Click on the Execute Query button to get the response for the created query/mutation.

  3. Generate Code for Query/Mutation: Generate code at the desired location by clicking Code Generator button, creating the following folders:

    • use(query/mutation)Name.ts: Generating useQuery and useMutation hooks.
    • types.ts: Generating TypeScript types for different operations.
    • (query/mutation).ts: Storing the created query or mutation.
    • index.ts: Exporting everything from a single file.

  4. Paste cURL:Click on the Paste cURL, to test your query and refetch a new schema.

  5. Add Variables and Headers: You can add variables and headers for your queries.

  6. Change Arguments to Variables: Click on the dollar sign beside fields to change arguments to variables.