add query parameters to the gr.Request object through the query_params attribute (#5681)

* add queryParams to frontend request to backend

* add changeset

* update guide

* added docs

* add changeset

* fix tests

* client

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/fair-signs-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@gradio/client": minor
+"gradio": minor
+---
+
+feat:add query parameters to the `gr.Request` object through the `query_params` attribute

client/js/src/client.ts

@@ -419,6 +419,9 @@ export function api_factory(fetch_implementation: typeof fetch): Client {
 				let payload: Payload;
 				let complete: false | Record<string, any> = false;
 				const listener_map: ListenerMap<EventType> = {};
+				const url_params = new URLSearchParams(
+					window.location.search
+				).toString();
 
 				handle_blob(
 					`${http_protocol}//${host + config.path}`,
@@ -440,7 +443,7 @@ export function api_factory(fetch_implementation: typeof fetch): Client {
 						post_data(
 							`${http_protocol}//${host + config.path}/run${
 								_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`
-							}`,
+							}${url_params ? "?" + url_params : ""}`,
 							{
 								...payload,
 								session_hash
@@ -508,7 +511,7 @@ export function api_factory(fetch_implementation: typeof fetch): Client {
 						});
 
 						let url = new URL(`${ws_protocol}://${host}${config.path}
-							/queue/join`);
+							/queue/join${url_params ? "?" + url_params : ""}`);
 
 						if (jwt) {
 							url.searchParams.set("__sign", jwt);

gradio/route_utils.py

@@ -78,11 +78,14 @@ class Request:
     auth is enabled, the `username` attribute can be used to get the logged in user.
     Example:
         import gradio as gr
-        def echo(name, request: gr.Request):
-            print("Request headers dictionary:", request.headers)
-            print("IP address:", request.client.host)
-            return name
+        def echo(text, request: gr.Request):
+            if request:
+                print("Request headers dictionary:", request.headers)
+                print("IP address:", request.client.host)
+                print("Query parameters:", dict(request.query_params))
+            return text
         io = gr.Interface(echo, "textbox", "textbox").launch()
+    Demos: request_ip_headers
     """
 
     def __init__(

guides/01_getting-started/03_sharing-your-app.md

@@ -229,23 +229,24 @@ automatically logged in with a fake user profile. This allows you to debug your
 
 ## Accessing the Network Request Directly
 
-When a user makes a prediction to your app, you may need the underlying network request, in order to get the request headers (e.g. for advanced authentication), log the client's IP address, or for other reasons. Gradio supports this in a similar manner to FastAPI: simply add a function parameter whose type hint is `gr.Request` and Gradio will pass in the network request as that parameter. Here is an example:
+When a user makes a prediction to your app, you may need the underlying network request, in order to get the request headers (e.g. for advanced authentication), log the client's IP address, getting the query parameters, or for other reasons. Gradio supports this in a similar manner to FastAPI: simply add a function parameter whose type hint is `gr.Request` and Gradio will pass in the network request as that parameter. Here is an example:
 
 ```python
 import gradio as gr
 
-def echo(name, request: gr.Request):
+def echo(text, request: gr.Request):
     if request:
         print("Request headers dictionary:", request.headers)
         print("IP address:", request.client.host)
-    return name
+        print("Query parameters:", dict(request.query_params))
+    return text
 
 io = gr.Interface(echo, "textbox", "textbox").launch()
 ```
 
 Note: if your function is called directly instead of through the UI (this happens, for
-example, when examples are cached), then `request` will be `None`. You should handle
-this case explicitly to ensure that your app does not throw any errors. That is why
+example, when examples are cached, or when the Gradio app is called via API), then `request` will be `None`. 
+You should handle this case explicitly to ensure that your app does not throw any errors. That is why
 we have the explicit check `if request`.
 
 ## Mounting Within Another FastAPI App