Question

我有一个使用express，express-graphql，graphql和graphql-upload实现的GraphQL后端。我的GraphQL模式声明如下：

type OProject {
    _id: ID!
    title: String!
    theme: String!
    budget: Float!
    documentation: String!
    date: Date
}

input IProject {
    title: String!
    theme: String!
    budget: Float!
    file: Upload!
}

type Mutations {
    create(data: IProject): OProject
}

type Mutation {
    Project: Mutations
}

我想使用axios向 / graphql 处的GraphQL API发出create请求。我该怎么办？

Answer 1

遵循GraphQL多部分请求规范detailed here，您可以通过以下方式进行操作：

创建一个FormData实例，并用以下内容填充它：
- operations字段
- map字段和
- 要上传的文件

创建FormData实例

var formData = new FormData();

operations字段：

此字段的值将是一个包含GraphQL query和variables的JSON字符串。您必须将variables对象中的所有文件字段设置为null，例如：

const query = `
    mutation($project: IProject!) {
        Project { create(data: $project) { _id } }
    }
`;

const project = {
    title: document.getElementById("project-title").value,
    theme: document.getElementById("project-theme").value,
    budget: Number(document.getElementById("project-budget").value),
    file: null
};

const operations = JSON.stringify({ query, variables: { project } });
formData.append("operations", operations);

map字段：

顾名思义，此字段的值将是对象的JSON字符串，其键是包含文件的FormData实例中字段的名称。每个字段的值将是一个包含字符串的数组，该字符串指示与值的键对应的文件将绑定到variables对象中的哪个字段，例如：

const map = {
    "0": ["variables.project.file"]
};
formData.append("map", map);

要上传的文件 然后，您应该按照map将文件添加到FormData实例。在这种情况下；

const file = document.getElementById("file").files[0];
formData.append("0", file);

就是这样。现在，您可以使用axios和FormData实例向后端提出请求了：

axios({
    url: "/graphql",
    method: "post",
    data: formData
})
    .then(response => { ... })
    .catch(error => { ... });

如何使用axios将文件上传到使用graphql-upload实现的graphql后端？

1 个答案: