I have a JSON object like so:
const people = {
admin: {
name: 'john',
avatar: {
img: File
}
},
moderator: {
name: 'jake',
avatar: {
img: File
}
}
};
The img property is just a File object.
What I want to do
I want to send this data as a POST request to my node server.
What I've tried:
So one approach that seems to work is to create a FormData object and then manually append each property to it like so:
client.js
let formData = new FormData();
formData.append('admin-name', people.admin.name);
formData.append('admin-avatar', people.admin.avatar.img);
formData.append('moderator-name', people.moderator.name);
formData.append('moderator-avatar', people.moderator.avatar.img);
fetch('/submit', { method: 'POST', body: formData })
server.js
import formidable from 'express-formidable';
router.use('/submit', formidable());
router.post('/submit', (req, res) => {
console.log(req.files); // This contains the Files objects
console.log(req.fields); // This has the rest of the data
res.end();
});
Server Output
{ 'admin-avatar': File {}, 'moderator-avatar': File {} }
{ 'admin-name': 'john', 'moderator-name': 'jake' }
The problem with this approach
The main reason I don't like doing it this way is because I have to manually append every single field. I don't think I can do this in a loop because in my data, some of the fields are nested objects. Also, in my server, the data is no longer grouped together like it was in the original object.
Is there any better way to do this? Thanks!
I don't think there is any clean/elegant way of dynamically creating a FormData object. You could solve the repetitiveness by looping over the properties with Object.keys():
const people = {
admin: {
name: 'john',
avatar: {
img: {}
}
},
moderator: {
name: 'jake',
avatar: {
img: {}
}
}
}
const formData = new FormData()
Object.keys(people)
.forEach(authority => {
const { name, avatar: img } = people[authority]
formData.append(`${authority}-name`, name)
formData.append(`${authority}-avatar`, img)
})
Related
I am using React with nextJS to do web developer,I want to render a list on my web page, the list information comes from the server(I use axios get function to get the information). However some JSON objects are lack of some information like the name, address and so on. My solution is to use a If- else to handle different kind of JSON object. Here is my code:
getPatientList(currentPage).then((res: any) => {
console.log("Response in ini: " , res);
//console.log(res[0].resource.name[0].given[0]);
const data: any = [];
res.map((patient: any) => {
if ("name" in patient.resource) {
let info = {
id: patient.resource.id,
//name:"test",
name: patient.resource.name[0].given[0],
birthDate: patient.resource.birthDate,
gender: patient.resource.gender,
};
data.push(info);
} else {
let info = {
id: patient.resource.id,
name: "Unknow",
//name: patient.resource.name[0].given[0],
birthDate: patient.resource.birthDate,
gender: patient.resource.gender,
};
data.push(info);
}
});
Is there any more clever of efficient way to solve this problem? I am new to TS and React
Use the conditional operator instead to alternate between the possible names. You should also return directly from the .map callback instead of pushing to an outside variable.
getPatientList(currentPage).then((res) => {
const mapped = res.map(({ resource }) => ({
id: resource.id,
// want to correct the spelling below?
name: "name" in resource ? resource.name[0].given[0] : "Unknow",
birthDate: resource.birthDate,
gender: resource.gender,
}));
// do other stuff with mapped
})
DATA STORE FILE:
let data = {
users: [],
channels: [],
};
// Use get() to access the data
function getData() {
return data;
}
// Use set(newData) to pass in the entire data object, with modifications made
function setData(newData) {
data = newData;
}
export { getData, setData };
clearV1() FILE:
import { getData, setData } from './dataStore';
function clearV1() {
let data = {
users: [],
channels: [],
};
setData(data);
return {};
}
export { clearV1 };
When running the clearV1() function in another, it does not clear the data store. For example:
authRegisterV1 creates a user and adds them to the data store
channelCreateV1 creates a channel and adds it to the data store
authRegisterV1('test1#gmail.com','test123','Firt','Last');
clearV1()
authRegisterV1('test2#gmail.com','test123','Firt','Last');
expected output:
{
users: [
{
uId: 1,
email: 'test2#gmail.com',
password: 'test123',
nameFirst: 'Firt',
nameLast: 'Last',
handle: 'firtlast0',
permissionId: 2
}
],
channels: [],
}
wrong output:
{
users: [
{
uId: 1,
email: 'test1#gmail.com',
password: 'test123',
nameFirst: 'Firt',
nameLast: 'Last',
handle: 'firtlast',
permissionId: 1
},
{
uId: 2,
email: 'test2#gmail.com',
password: 'test123',
nameFirst: 'Firt',
nameLast: 'Last',
handle: 'firtlast0',
permissionId: 2
}
],
channels: [],
}
I believe the implementation of the clearV1() function is correct, what other possible reason could there be for this error? I imported all the used functions into the test file.
I think the problem your facing is the fact that you created data inside of ./dataStore, and thus, it does not exist in clearV1() file. Another way to put is, when you made the data variable initially, it was made in ./dataStore and only exists there. So it makes a new variable instead of updating the existing one.
Another problem is, you are trying to using let data = [value]. let creates the variable just inside of the function you called it in, ignoring any variables on the outside. As a rule of thumb in javascript, when updating an existing variable, use [name] = [value].
If you want to learn more, here's the MDN docs for import statements and let statements.
I have a server side schema with this mutation type
type Mutation {
updateSettings(settings: SettingsInput): Settings
}
input SettingsInput {
repositories: [RepositoryInput]
}
input RepositoryInput {
id: String
name: String
url: String
}
I can mutate this exactly like I want to if I use a client such as Altair, with this query:
mutation{
updateSettings(settings: {
repositories: [
{
name: "name1"
url: "url1"
},
{
name: "name2"
url: "url2"
}
]
}){
repositories {
id
name
url
}
}
}
However I am struggling to get it working when using Apollo
The best I can get is this
import { SubscriptionClient } from "subscriptions-transport-ws";
import { gql } from "apollo-boost";
import { WebSocketLink } from "apollo-link-ws";
const wsClient = new SubscriptionClient("ws://localhost:5001/graphql", {
reconnect: true
});
const client = new WebSocketLink(wsClient);
const UPDATE_SETTINGS = gql`
mutation UpdateSettings($settings: SettingsInput) {
updateSettings(settings: $settings) {
repositories {
id
name
url
}
}
}
`;
client
.request({
query: UPDATE_SETTINGS,
variables: { repository: [{name: "name1", url:"url1"},
{name: "name2", url:"url2"}]}
})
I am obviously missing something. The client doesn't seem to be aware of the servers SettingsInput, but I can't really figure out how to create a query for the client that takes complex objects or arrays as variables.
Am I going about this in a totaly weird way or how do I go about sending "complex" mutations to the server from an apollo client?
The client aside, you also need to fix the variables object you're passing in. The variable you've defined in your operation is named settings, but you are only passing in a variable named repository. Additionally, the shape of this variable doesn't match SettingsInput as shown in your schema. variables should look something like:
const variables = {
settings: {
repositories: [
{
name: 'name1',
url: 'url1'
},
{
name: 'name2',
url: 'url2'
},
],
},
}
I am very new to GraphQL. I'm trying to pass an object like this one as an argument:
{
filters: {
status: 'approved',
id: {
LESS_THAN: 200
}
}
}
Or this object can be like this either;
{
filters: {
status: ['approved', 'pending'],
id: 200
}
}
I know all properties that can be in this object, but all of these properties can be a string/int or an object.
I tried to define it like this but it obviously didn't work:
args: {
filters: { type: new GraphQLNonNull(new GraphQLNonNull(GraphQLString)) },
},
I'm trying to define the argument with a GraphQL type GraphQLInputObjectType.
const OffersFiltersType = new GraphQLInputObjectType({
name: 'Filters',
description: '...',
fields: () => ({})
id: {
type: new GraphQLNonNull({
name: 'Id',
description: '...',
fields: {
}
}),
resolve: (offer) => offer.id
},
}),
});
But how can i specify to this type that my id can be either a int or an object?
This is my Query definition:
const QueryType = new GraphQLObjectType({
name: 'Query',
description: '...',
fields: () => ({
offers: {
type: OffersType,
args: {
limit: { type: GraphQLInt },
page: { type: GraphQLInt },
sort: { type: GraphQLString },
filters: { [HERE] }
},
resolve: (root, args, context, info) => {
const gqlFields = graphqlFields(info);
const fields = Object.keys(gqlFields.offer);
const queryArgs = args;
queryArgs.fields = fields;
return getOffers(queryArgs);
}
},
}),
});
And this is my request with superagent
const getOffers = (args) => {
const queryArgs = args;
if (typeof queryArgs.limit !== 'undefined') {
queryArgs.limit = args.limit;
} else {
queryArgs.limit = Number.MAX_SAFE_INTEGER;
}
return new Promise((fulfill, reject) => {
request
.get(API_URL)
.query(qs.stringify(args))
.end((err, res) => {
if (err) {
reject(err);
}
fulfill(res);
});
});
};
I need this object to construct a query in my resolve function. Thank you all for your help! I only need simple advices!
This is not allowed, by design: https://github.com/graphql/graphql-js/issues/303
GraphQL does not support unknown property names, largely because it would make the schema meaningless. The example given is a simple typo:
If you have the query query ($foo: String) { field(arg: $foo) } and the variables { "fooo": "abc" }, we currently flag this as an error, but we could potentially miss this typo if we did not raise errors.
The schema is meant to ensure compatibility between servers and clients, even across versions, and allowing unknown properties would break that.
There is a merge request open for this in the GraphQL-JS repo, but it is still being debated and has the same problems with typos and general inconsistency.
The idea of returning a primitive or object runs into a similar problem. When accepting an object, you need to list the properties you're expecting and the query will validate those against the schema. The properties, and their types and null-ness, must be known ahead of time for you (and the parser) to build the query and definitely need to be known when you validate.
If you could accept a primitive or object, you would have to specify the fields on that object, but those could not possibly exist on the primitive. That's a problem.
How can I use normalizr to deal with nested standardised JSON API responses that are key via the { data: ... } standard?
For example a Book
{
data: {
title: 'Lord of the Rings',
pages: 9250,
publisher: {
data: {
name: 'HarperCollins LLC',
address: 'Big building next to the river',
city: 'Amsterdam'
},
},
author: {
data: {
name: 'J.R.R Tolkien',
country: 'UK',
age: 124,
}
}
}
}
How would I design schemas to deal with the nested data key?
For each entity in your response, you should create it's own schema.In your example, we have three entities - books, authors and publishers:
// schemas.js
import { Schema } from 'normalizr';
const bookSchema = new Schema('book');
const publisherSchema = new Schema('publisher');
const authorSchema = new Schema('author');
If some entity contains nested data which should be normalized, we need to use define method of it schema.This method accepts an object with nesting rules.If we need to normalize publisher and author props of book entity, we should pass an object to define function with same structure as our response:
// schemas.js
bookSchema.define({
data: {
publisher: publisherSchema,
author: authorSchema
}
});
Now we can normalize our response:
import { normalize } from 'normalizr';
import { bookSchema } from './schemas.js';
const response = {
data: {
title: 'Lord of the Rings',
pages: 9250,
publisher: {
data: {
name: 'HarperCollins LLC',
address: 'Big building next to the river',
city: 'Amsterdam'
},
},
author: {
data: {
name: 'J.R.R Tolkien',
country: 'UK',
age: 124,
}
}
}
}
const data = normalize(response, bookSchema);
I believe what you're after is the use of the assignEntity function which can be passed in the options of normalize. In this instance it lets us, where appropriate, filter out the redundant data properties and go straight to the values underneath.
Effectively assignEntity let's you control how each key of data is normalized. Take a look here for a little more on how it works.
I put this together as a demonstration, take a look: http://requirebin.com/?gist=b7d89679202a202d72c7eee24f5408b6. Here's a snippet:
book.define({
data: {
publisher: publisher,
author: author,
characters: normalizr.arrayOf(character)
}}
);
publisher.define({
data: {
country: country
}
});
const result = normalizr.normalize(response, book, { assignEntity: function (output, key, value, input) {
if (key === 'data') {
Object.keys(value).forEach(function(d){
output[d] = value[d];
})
} else {
output[key] = value;
}
}});
Also see in particular Ln 29, where the array of characters has some objects with the information nested within data and some without. All are normalized correctly.
I also added some parts to show how it works with arrays and deeply nested data, see the country model within publisher.
With the data provided you will need a slug due to the absence of id's, which each schema also contains in the example.
Normalizr is fantastic, I hope that helps explain a little more about it :)