¿Cómo mapear una respuesta local en solicitudes GraphQL?

Este mini artículo muestra cómo mapear una respuesta local para solicitudes GraphQL.

1. Problema

En general, las solicitudes GraphQL usan el mismo endpoint para recibir respuestas distintas. La consulta (query) del cuerpo de la solicitud determina qué tipo de datos se piden al servidor. Por eso, las herramientas de depuración actuales (por ejemplo, Map Local, Breakpoint, Map Remote, etc.) pueden no funcionar bien, ya que estas herramientas se basan en la coincidencia de URL.

2. Scripting Tool al rescate

Para mapear una respuesta a determinadas solicitudes GraphQL, te recomendamos encarecidamente usar la herramienta Scripting.

La herramienta Scripting permite usar JavaScript para manipular de forma flexible las solicitudes y respuestas HTTP. Imagina que puedes usar scripts para hacer lo mismo que Breakpoint, Map Local, Map Remote y más, con código JavaScript 👀

Con la herramienta Scripting podemos lograr fácilmente:

• Map Local para la respuesta según el QueryName
• Manipular la query, el cuerpo y los headers de las solicitudes y respuestas GraphQL

Si es tu primera vez con la herramienta Scripting, consulta la documentación, los Addons y los fragmentos de código.

3. Mapear una respuesta local con solicitudes GraphQL

Mapear una respuesta para la query /user

1. Abre la app de Proxyman y activa SSL Proxying en el dominio de GraphQL
2. Verifica que puedas ver las solicitudes HTTPS de tu dominio
3. Haz clic derecho en el flujo -> Tool -> Scripting para crear un script con la URL indicada
4. Para importar un archivo local: haz clic en el botón More -> Import JSON or Other files -> y luego selecciona tu archivo
5. Usa el siguiente script, que muestra cómo asignar un archivo local a una solicitud GraphQL con QueryName="user"

// 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();

	// 2. Save to sharedState
	sharedState.queryName = queryName

	// 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;
}

Como resultado, todas las solicitudes GraphQL cuya query sea user devolverán la respuesta local que hemos definido.

4. Próximos pasos

Si te preguntas qué puede hacer Scripting, consulta los fragmentos de código.

Actualización útil

Es preferible usar una operación GraphQL con nombre, como query UserProfile, porque es más fácil de identificar que una consulta anónima. Las versiones actuales de Proxyman pueden mostrar el nombre de la operación y usar reglas compatibles con GraphQL en las herramientas que lo admiten. Si mantienes el script de arriba, pruébalo con variables, alias y una solicitud sin nombre de operación, para que un cuerpo inesperado no detenga el script. Además, asegúrate de que la respuesta local sea JSON válido y tenga la misma estructura de data o errors que la API real.

Proxyman es una app de macOS de alto rendimiento que permite a los desarrolladores capturar tráfico HTTPS en dispositivos iOS, en el simulador de iOS y en dispositivos Android.

Descárgala en https://proxyman.com