如何在 Graphql 突变中返回 PDF 文件？

Question

我在前端使用 React 和 Graphql，在后端使用 Django 和 Graphene。

我希望能够下载报告的 pdf 文件。我尝试使用突变来做到这一点，如下所示：

const [createPdf, {loading: createPdfLoading, error: createPdfError}] = useMutation(CREATE_PDF)
const handleCreatePDF = async (reportId) => {
        const res = await createPdf({variables: {reportId: parseInt(reportId) }})
        debugger;
    };

export const CREATE_PDF = gql`
    mutation ($reportId: Int!) {
        createPdf (reportId: $reportId){
            reportId
        }
    }
`;

在后端，我有这样的事情：

class CreatePDFFromReport(graphene.Mutation):
    report_id = graphene.Int()

    class Arguments:
        report_id = graphene.Int(required=True)

    def mutate(self, info, report_id):
        user = info.context.user

        if user.is_anonymous:
            raise GraphQLError("You are not logged in!")

        report = Report.objects.get(id=report_id)
        if not report:
            raise GraphQLError("Report not found!")

        if user != report.posted_by:
            raise GraphQLError("You are not permitted to do that!")

        html_string = render_to_string('report.html', {'report_id': 1})

        pdf_file = HTML(string=html_string)
        response = HttpResponse(pdf_file, content_type='application/pdf')
        response['Content-Disposition'] = 'attachment; filename="rapport_{}"'.format(report_id)
        return response


        # return CreatePDFFromReport(report_id=report_id)

当我取消注释return CreatePDFFromReport(report_id=report_id)它工作正常。

但我想返回pdf文件。

有没有可能做到这一点？

谢谢。

Answer 1

仅靠变异是无法做到的。

您不能使用 json 通信返回文件（二进制）/标头（mime）/等（需要由浏览器作为下载请求行为处理）。GraphQL 请求和响应采用 json 格式。

解决方案

工作流程：

• 调用突变（在变量中传递参数）
• 解析器创建文件内容并将其保存在某处（服务器或 s3 上的文件存储）
• 解析器将文件id作为下载 url 的一部分或完整url（字符串）返回到目标文件

id或者url在这种情况下应该是所需突变响应的一部分

 mutation ($reportId: Int!) {
     createPdf (reportId: $reportId){
        reportDownloadId
    }
 }

• 突变结果（和我们的reportDownloadId）可在data

data 可以通过两种方式访问​​突变的（结果/响应）：

...通过{ data }：

const [addTodo, { data }] = useMutation(ADD_TODO);

...或由onCompleted处理程序：

addTodo({ 
  variables: { type: input.value },
  onCompleted = {(data) => {
    // some action with 'data'
    // f.e. setDownloadUrl(data.reportDownloadId)
    // from 'const [downloadUrl, setDownloadUrl] = useState(null)'
  }}
});

文档中描述了这两种方法

这两种方法都允许您（有条件地）渲染下载按钮/链接/组件，fe

{downloadUrl && <DownloadRaport url={downloadUrl}/>}

{downloadUrl && <a href={downloadUrl}>Raport ready - download it</a>}

// render download, share, save in cloud, etc.

Handler 方法可用于自动调用下载文件请求，无需渲染附加按钮。这看起来像一个动作，而从技术上讲有两个以下请求（graphql 突变和下载）。该线程描述了如何使用 js 处理下载。