{"id":17182391,"url":"https://github.com/simoncropp/graphql.attachments","last_synced_at":"2025-04-13T16:21:12.222Z","repository":{"id":32920199,"uuid":"145634108","full_name":"SimonCropp/GraphQL.Attachments","owner":"SimonCropp","description":"Provides access to a HTTP stream in GraphQL","archived":false,"fork":false,"pushed_at":"2025-04-09T00:41:01.000Z","size":1239,"stargazers_count":17,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T04:23:05.185Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimonCropp.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license.txt","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"SimonCropp"}},"created_at":"2018-08-22T00:25:13.000Z","updated_at":"2025-04-09T00:41:04.000Z","dependencies_parsed_at":"2023-02-19T02:46:09.081Z","dependency_job_id":"474e72fb-7c5c-4c94-8a26-dadaca6f1115","html_url":"https://github.com/SimonCropp/GraphQL.Attachments","commit_stats":{"total_commits":940,"total_committers":6,"mean_commits":"156.66666666666666","dds":0.3893617021276595,"last_synced_commit":"541b961791d34f9edcd591865cd98540377b39d9"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonCropp%2FGraphQL.Attachments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonCropp%2FGraphQL.Attachments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonCropp%2FGraphQL.Attachments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonCropp%2FGraphQL.Attachments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonCropp","download_url":"https://codeload.github.com/SimonCropp/GraphQL.Attachments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741844,"owners_count":21154385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T00:36:58.479Z","updated_at":"2025-04-13T16:21:12.213Z","avatar_url":"https://github.com/SimonCropp.png","language":"C#","funding_links":["https://github.com/sponsors/SimonCropp"],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"https://raw.githubusercontent.com/SimonCropp/GraphQL.Attachments/master/src/icon.png\" height=\"40px\"\u003e GraphQL.Attachments\n\n[![Build status](https://ci.appveyor.com/api/projects/status/wq5ox06crbl9c2py/branch/main?svg=true)](https://ci.appveyor.com/project/SimonCropp/graphql-attachments)\n[![NuGet Status](https://img.shields.io/nuget/v/GraphQL.Attachments.svg)](https://www.nuget.org/packages/GraphQL.Attachments/)\n\nProvides access to a HTTP stream (via JavaScript on a web page) in [GraphQL](https://graphql-dotnet.github.io/) [Mutations](https://graphql-dotnet.github.io/docs/getting-started/mutations/) or [Queries](https://graphql-dotnet.github.io/docs/getting-started/queries). Attachments are transferred via a [multipart form](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition).\n\n**See [Milestones](../../milestones?state=closed) for release notes.**\n\n\n### Powered by\n\n[![JetBrains logo.](https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.svg)](https://jb.gg/OpenSourceSupport)\n\n\n## NuGet package\n\nhttps://nuget.org/packages/GraphQL.Attachments/\n\n    PM\u003e Install-Package GraphQL.Attachments\n\n\n## Usage in Graphs\n\nIncoming and Outgoing attachments can be accessed via the `ResolveFieldContext`:\n\n\u003c!-- snippet: UsageInGraphs --\u003e\n\u003ca id='snippet-UsageInGraphs'\u003e\u003c/a\u003e\n```cs\nField\u003cResultGraph\u003e(\"withAttachment\")\n    .Argument\u003cNonNullGraphType\u003cStringGraphType\u003e\u003e(\"argument\")\n    .Resolve(context =\u003e\n    {\n        var incomingAttachments = context.IncomingAttachments();\n        var outgoingAttachments = context.OutgoingAttachments();\n\n        foreach (var incoming in incomingAttachments.Values)\n        {\n            // For sample purpose echo the incoming request\n            // stream to the outgoing response stream\n            var memoryStream = new MemoryStream();\n            incoming.CopyTo(memoryStream);\n            memoryStream.Position = 0;\n            outgoingAttachments.AddStream(incoming.Name, memoryStream);\n        }\n\n        return new Result\n        {\n            Argument = context.GetArgument\u003cstring\u003e(\"argument\"),\n        };\n    });\n```\n\u003csup\u003e\u003ca href='/src/Shared/Graphs/BaseRootGraph.cs#L19-L44' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-UsageInGraphs' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n## Server-side Middleware\n\n### RequestReader instead of binding\n\nWhen using Attachments the incoming request also requires the incoming form data to be parse. To facilitate this [RequestReader](/src/GraphQL.Attachments/RequestReader.cs) is used.:\n\n\u003c!-- snippet: Invoke --\u003e\n\u003ca id='snippet-Invoke'\u003e\u003c/a\u003e\n```cs\npublic async Task InvokeAsync(HttpContext context, RequestDelegate next)\n{\n    var cancel = context.RequestAborted;\n    var response = context.Response;\n    var request = context.Request;\n    var isGet = HttpMethods.IsGet(request.Method);\n    var isPost = HttpMethods.IsPost(request.Method);\n\n    if (isGet)\n    {\n        var (query, inputs, operation) = readerWriter.ReadGet(request);\n        await Execute(response, query, operation, null, inputs, cancel);\n        return;\n    }\n\n    if (isPost)\n    {\n        var (query, inputs, attachments, operation) = await readerWriter.ReadPost(request, cancel);\n        await Execute(response, query, operation, attachments, inputs, cancel);\n        return;\n    }\n\n    response.Headers.Allow = \"GET, POST\";\n    response.StatusCode = (int) HttpStatusCode.BadRequest;\n}\n```\n\u003csup\u003e\u003ca href='/src/SampleWeb/GraphQlMiddleware.cs#L12-L40' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-Invoke' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### Query Execution\n\nTo expose the attachments to the queries, the attachment context needs to be added to the `IDocumentExecuter`. This is done using `AttachmentsExtensions.ExecuteWithAttachments`:\n\n\u003c!-- snippet: ExecuteWithAttachments --\u003e\n\u003ca id='snippet-ExecuteWithAttachments'\u003e\u003c/a\u003e\n```cs\nvar result = await executer.ExecuteWithAttachments(options, attachments);\n```\n\u003csup\u003e\u003ca href='/src/SampleWeb/GraphQlMiddleware.cs#L63-L67' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-ExecuteWithAttachments' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### Result Writing\n\nAs with RequestReader for the incoming data, the outgoing data needs to be written with any resulting attachments. To facilitate this [ResponseWriter](/src/GraphQL.Attachments/ResponseWriter.cs) is used.\n\n\u003c!-- snippet: ResponseWriter --\u003e\n\u003ca id='snippet-ResponseWriter'\u003e\u003c/a\u003e\n```cs\nawait readerWriter.WriteResult(response, result, cancel);\n```\n\u003csup\u003e\u003ca href='/src/SampleWeb/GraphQlMiddleware.cs#L69-L73' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-ResponseWriter' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n## Client - JavaScript\n\nThe JavaScript that submits the query does so through by building up a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object and [POSTing](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_POST_method) that via the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).\n\n#### Helper method for builgin post settings\n\n\u003c!-- snippet: BuildPostSettings --\u003e\n\u003ca id='snippet-BuildPostSettings'\u003e\u003c/a\u003e\n```html\nfunction BuildPostSettings() {\n    var data = new FormData();\n    var files = document.getElementById(\"files\").files;\n    for (var i = 0; i \u003c files.length; i++) {\n        data.append('files[]', files[i], files[i].name);\n    }\n    data.append(\n        \"query\",\n        'mutation{ withAttachment (argument: \"argumentValue\"){argument}}'\n    );\n\n    return {\n        method: 'POST',\n        body: data\n    };\n}\n```\n\u003csup\u003e\u003ca href='/src/SampleWeb/test.html#L44-L61' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BuildPostSettings' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n#### Post mutation and download result\n\n\u003c!-- snippet: PostMutationAndDownloadFile --\u003e\n\u003ca id='snippet-PostMutationAndDownloadFile'\u003e\u003c/a\u003e\n```html\nfunction PostMutationAndDownloadFile() {\n\n    var postSettings = BuildPostSettings();\n    return fetch('graphql', postSettings)\n        .then(function (data) {\n            return data.formData().then(x =\u003e {\n                var resultContent = '';\n                x.forEach(e =\u003e {\n                    // This is the attachments\n                    if (e.name) {\n                        var a = document.createElement('a');\n                        var blob = new Blob([e]);\n                        a.href = window.URL.createObjectURL(blob);\n                        a.download = e.name;\n                        a.click();\n                    }\n                    else {\n                        resultContent += JSON.stringify(e);\n                    }\n                });\n                result.innerHTML = resultContent;\n            });\n        });\n}\n```\n\u003csup\u003e\u003ca href='/src/SampleWeb/test.html#L17-L42' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-PostMutationAndDownloadFile' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n#### Post mutation and display text result\n\n\u003c!-- snippet: PostMutationWithTextResult --\u003e\n\u003ca id='snippet-PostMutationWithTextResult'\u003e\u003c/a\u003e\n```html\nfunction PostMutationWithTextResult() {\n    var postSettings = BuildPostSettings();\n    return fetch('graphql', postSettings)\n        .then(function (data) {\n            return data.text().then(x =\u003e {\n                result.innerHTML = x;\n            });\n        });\n}\n```\n\u003csup\u003e\u003ca href='/src/SampleWeb/test.html#L5-L15' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-PostMutationWithTextResult' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n## Client - .NET\n\nCreating and posting a multipart form can be done using a combination of [MultipartFormDataContent](https://msdn.microsoft.com/en-us/library/system.net.http.multipartformdatacontent.aspx) and [HttpClient.PostAsync](https://msdn.microsoft.com/en-us/library/system.net.http.httpclient.postasync.aspx). To simplify this action the `ClientQueryExecutor` class can be used:\n\n\u003c!-- snippet: QueryExecutor.cs --\u003e\n\u003ca id='snippet-QueryExecutor.cs'\u003e\u003c/a\u003e\n```cs\nnamespace GraphQL.Attachments;\n\npublic class QueryExecutor\n{\n    HttpClient client;\n    string uri;\n\n    public QueryExecutor(HttpClient client, string uri = \"graphql\")\n    {\n        Guard.AgainstNullWhiteSpace(uri);\n\n        this.client = client;\n        this.uri = uri;\n    }\n\n    public Task\u003cQueryResult\u003e ExecutePost(string query, Cancel cancel = default)\n    {\n        Guard.AgainstNullWhiteSpace(query);\n        return ExecutePost(new PostRequest(query), cancel);\n    }\n\n    public async Task\u003cQueryResult\u003e ExecutePost(PostRequest request, Cancel cancel = default)\n    {\n        using var content = new MultipartFormDataContent();\n        content.AddQueryAndVariables(request.Query, request.Variables, request.OperationName);\n\n        if (request.Action != null)\n        {\n            var postContext = new PostContext(content);\n            request.Action?.Invoke(postContext);\n            postContext.HeadersAction?.Invoke(content.Headers);\n        }\n\n        var response = await client.PostAsync(uri, content, cancel);\n        var result = await response.ProcessResponse(cancel);\n        return new(result.Stream, result.Attachments, response.Content.Headers, response.Headers, response.StatusCode);\n    }\n\n    public Task\u003cQueryResult\u003e ExecuteGet(string query, Cancel cancel = default)\n    {\n        Guard.AgainstNullWhiteSpace(query);\n        return ExecuteGet(new GetRequest(query), cancel);\n    }\n\n    public async Task\u003cQueryResult\u003e ExecuteGet(GetRequest request, Cancel cancel = default)\n    {\n        var compressed = Compress.Query(request.Query);\n        var variablesString = RequestAppender.ToJson(request.Variables);\n        var getUri = UriBuilder.GetUri(uri, variablesString, compressed, request.OperationName);\n\n        using var getRequest = new HttpRequestMessage(HttpMethod.Get, getUri);\n        request.HeadersAction?.Invoke(getRequest.Headers);\n        var response = await client.SendAsync(getRequest, cancel);\n        return await response.ProcessResponse(cancel);\n    }\n}\n```\n\u003csup\u003e\u003ca href='/src/GraphQL.Attachments.Client/QueryExecutor.cs#L1-L56' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-QueryExecutor.cs' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\nThis can be useful when performing [Integration testing in ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/testing/integration-testing).\n\n\n## Icon\n\n\u003ca href=\"https://thenounproject.com/term/database/1631008/\" target=\"_blank\"\u003ememory\u003c/a\u003e designed by H Alberto Gongora from [The Noun Project](https://thenounproject.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimoncropp%2Fgraphql.attachments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimoncropp%2Fgraphql.attachments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimoncropp%2Fgraphql.attachments/lists"}