# GraphQL

> Depura solicitudes GraphQL en Proxyman: haz coincidir reglas por nombre de query, da formato a las queries, muestra una columna Query Name y simula respuestas con scripts.

## 1. Usar herramientas de depuración con solicitudes GraphQL {#1-use-debugging-tools-with-graphql-requests}

Desde Proxyman 2.27.0, puedes usar herramientas de depuración con solicitudes GraphQL especificando el GraphQL Query Name.

La coincidencia por GraphQL QueryName funciona con Breakpoint, Map Local, Map Remote, Block List, Allow List y la herramienta Scripting.

### Cómo usarlo {#how-to-use}

1. Abre la herramienta de depuración (por ejemplo, Breakpoint)
2. Crea una regla nueva
3. Haz clic en el desplegable **Use Wildcard** -> **Advanced** -> marca **GraphQL QueryName**
4. Introduce el GraphQL QueryName

La herramienta de depuración aplica primero la regla de coincidencia original y después la coincidencia por GraphQL QueryName.

![Editor de reglas de Breakpoint de Proxyman con Use Wildcard > Advanced > GraphQL QueryName marcado](https://proxyman.com/docs/assets/Screen_Shot_2021-05-26_at_15_46_13.png)

> **Nota:** A partir de la build 3.0.0, Proxyman rellena automáticamente el GraphQL Query Name cuando creas una regla de la herramienta de depuración.

## 2. Formateador de GraphQL {#2-graphql-prettier}

Desde Proxyman 2.33.0, Proxyman puede dar formato (embellecer) la query de GraphQL. Para activarlo, abre el menú **Tools** -> **Custom Previewer Tab…** y marca la casilla **GraphQL**.

![Pestaña GraphQL del panel Request de Proxyman con una query GetUser formateada y sus variables de GraphQL](https://proxyman.com/docs/assets/proxyman-graphql-query-prettier.jpg)

_Query de GraphQL formateada_

## 3. Mostrar el GraphQL Query Name en la tabla principal {#3-show-graphql-query-name-on-the-main-table-view}

Proxyman puede extraer y mostrar el Query Name de cada solicitud GraphQL. Haz clic derecho en el encabezado de la columna y activa la columna **Query Name**.

![Tabla principal de Proxyman con una columna Query Name que muestra GetUser, ListPosts y CreatePost, junto a una columna Comment](https://proxyman.com/docs/assets/proxyman-graphql-query-name-column.jpg)

_Columna Query Name_

- [Columna de encabezado personalizada](https://proxyman.com/docs/es/basic-features/custom-header-column)

## 4. Depurar solicitudes GraphQL (Legado - Proxyman 2.26.0 y anteriores) {#4-debug-graphql-requests-legacy---proxyman-2260-and-below}

GraphQL usa la misma URL para distintas queries, así que las herramientas de depuración basadas en URL (por ejemplo, Map Local, Breakpoint o Map Remote) no funcionan bien con él.

Sin embargo, con la herramienta Scripting puedes:

* Simular una respuesta local según el QueryName
* Cambiar la query, el body y los headers de las solicitudes y respuestas de GraphQL

### Map Local con la herramienta Scripting {#map-local-with-the-scripting-tool}

Puedes usar la herramienta Scripting para asignar un archivo local como respuesta:

1. Abre Proxyman
2. Activa SSL Proxying en el dominio de GraphQL
3. Asegúrate de que puedes ver las solicitudes HTTPS de tu dominio
4. Haz clic derecho en la solicitud -> **Tools** -> **Scripting…** para crear un script para su URL
5. Para importar un archivo local: haz clic en el botón **More** -> **Import JSON or Other File...** -> selecciona tu archivo
6. El siguiente script asigna un archivo local como respuesta de una solicitud GraphQL con QueryName="user"

```javascript
// Import file from More Button -> Import JSON or Other files 
const file = require("@users/B02D96D5.default_message_32E64A5B.json");

function onRequest(context, url, request) {

  // 1. Extract the queryName from the request
  var queryName = request.body.query.match(/\S+/gi)[1].split('(').shift();
  
  // Or extract the operationName
  var operationName = request.body.operationName
  
  // 2. Save to sharedState
  sharedState.queryName = queryName
  sharedState.operationName = operationName
  
  // Done
  return request;
}

function onResponse(context, url, request, response) {

  // 3. Check if it's the request we need to map
  if (sharedState.queryName == "user") {
    
    // 4. Import the local file by Action Button -> Import
    // Get the local JSON file and set it as a body (like Map Local)
    response.headers["Content-Type"] = "application/json";
    response.body = file;
  }

  // Done
  return response;
}
```

### Modificar encabezados, query y cuerpo {#manipulate-headers-query-body}

1. Usa el mismo código y cambia el queryName
2. Usa el [snippet code](https://proxyman.com/docs/es/scripting/snippet-code#2-common-on-request-and-response) para cambiar los valores

## Más información {#learn-more}

* [Cómo asignar una respuesta local para solicitudes GraphQL](https://proxyman.com/posts/2021-01-24-How-To-Map_Response_For_GraphQL_Requests)
* [Mostrar el Query Name de las solicitudes GraphQL](https://proxyman.com/posts/2021-03-28-Display-QueryName-From_GraphQL-Request)
* [Modificar solicitudes GraphQL con la herramienta Breakpoint](https://proxyman.com/posts/2023-03-16-GraphQL-Request-With-Breakpoint)