graphiql-codegen v1.1.16

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.