I am trying to serialize my payload from server, but it is not working.
Here is an example of my payload:
events:[{
id: "57f358856c616cf434fd0500"
annotations:[{_id: "57f358856c616cf434ff0500", desc: "hello world"}]
}]
I want to change annotations _id to id.
Here is my serializer:
//event.js
export default ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs:{
annotations:{embedded:'always'}
}
});
//annotation.js
export default ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin,{
attrs:{
id: '_id',
},
});
Even though I am using DS.EmbeddedRecordsMixin, it still doesn't work. Can anyone help me please? Thank you.
I am assuming whatever versions of ember and ember-data you are using will be making use of the Ember Data 2.0 Serializer (this means using the JSONAPISerializer).
So instead of what you have in your annotations.js I think you want a file in app/serializers/annotation.js, assuming you're not using pods.
// path: app/serializers/annotation.js
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
primaryKey: '_id'
});
Working Code Example I created in Ember Twiddle EmbeddedRecords with _id
Ember API reference: http://emberjs.com/api/data/classes/DS.JSONAPISerializer.html#property_primaryKey
Related
I'm struggling with what should be a simple case, but I can't seem to get to the bottom of it: I am building a very simple CRUD app with nextjs using MongoDB.
I am following the official nextjs "with-mongodb-mongoose" as a guide (https://github.com/vercel/next.js/tree/canary/examples/with-mongodb-mongoose)
While all should be simple, my code fails to properly create a document with the form data to be sent to MongoDB. In other words, all my entries in MongoDB are empty documents:
{ _id: new ObjectId("63a5aa1317a618f4d3eefab8"), __v: 0 }
Taking it to step by step:
I have created a very simple model that only takes "name" as a paremeter:
import mongoose from 'mongoose'
const raceresultSchema = new mongoose.Schema({
name: String,
});
const Raceresult = mongoose.models.Raceresult || mongoose.model('Raceresult', raceresultSchema)
export default Raceresult
My POSt API route is exactly the same as the one in the GitHub repo from nextjs:
case 'POST':
try {
const newResultDoc = await Raceresult.create(req.body);
res.status(201).json({ success: true, data: newResultDoc })
} catch (error) {
res.status(400).json({ success: false })
}
break
default:
res.status(400).json({ success: false })
break
}
I use ThunderClient in VSCode to simplify, and I make a POST request to the right API route with the following body:
{
"name": "test"
}
I systematically get the following answer:
{
"success": true,
"data": {
"_id": "63a5b71917a618f4d3eefae3",
"__v": 0
}
}
As I'm following the syntax from the Github repo, I don't see what I'm doing wrong.
The DB connection works fine. These empty documents get saved on my MongoDB, with no problem.
When I add elements manually in MongoDB Atlas, that works fine and the items get saved properly, with no problem.
The problem happens whenever I try to use the API route to save a document. So I guess the problem must come from the API POST code or from the body format. However, I can't figure out what is wrong as I'm following the syntax from the official GitHub repo...
I have seen another StackOverflow post with a similar type of issue, but the solution did not seem applicable to my case.
Appreciate your help!
EDIT: I copy/pastd the code from the nextjs github repo (Pet model, and Pet API route) and made a POST request in Thunder Client to save a pet in my database (which is not the point) and... it worked, the document is saved in my database with the data from the req body... I'll keep trying and update this post if I succeed with my own model
So I seem to have solved it like this:
Connected to my MongoDB database in my terminal and dropped all existing collections
stopped the app and restarted running npm run dev
tried the API calls again and... it now works.
I guess it had something to do with saved Schema Types that were not being validated somewhere... I don't know more, but this now works.
code in my project
the formatter method, may include async method, and may be use async and await，when i use, page render uncorrectly。Is there a solution?
Welcome to Stackoverflow. Please do not send code in images, as this is very inconvenient to answer. And please do not add links to external pages unless it is an official documentation.
Vue only binds variables which are defined in the data section.
So this should work:
export default {
data() {
return {
scope: {
data: {row: []}
but this will not bind the row records:
export default {
data() {
return {
scope: {} // does not work with scope.data.row
I'm trying to add CloudKit JS to a new Vue project. Ideally I'd be able to access CloudKit's functions from any component in my app. I'm brand new to Vue, so please go easy on me. :)
So far, I've tried putting the following in main.js:
var fetch = require('node-fetch')
var CloudKit = require("./cloudkit.js")
CloudKit.configure({
services: {
fetch: fetch
},
containers: [{
containerIdentifier: '...',
apiToken: '...',
environment: 'development'
}]
})
That gives me a script error in cloudkit.js:
TypeError: Cannot read property 'ArrayBuffer' of undefined
So then I read this SO post and tried this in App.vue:
export default {
name: 'App',
components: {
'master': Master
},
mounted() {
let CloudKit = document.createElement('script')
CloudKit.setAttribute('src', 'https://cdn.apple-cloudkit.com/ck/2/cloudkit.js')
document.head.appendChild(CloudKit)
}
}
I'm then able to configure CloudKit and use it inside App.vue, but I'm unclear on how to make CloudKit available in all my components without redefining it as I've done in the mounted() function above.
How can I import CloudKit and make it available in my Vue app globally?
I might be over-simplifying things, but I tried adding:
<script src="https://cdn.apple-cloudkit.com/ck/2/cloudkit.js"></script>
...to the index.html file in my Vue project, and it seems to work great. The CloudKit object is available in all of my components. ¯\_(ツ)_/¯
Your can add a new global property in vue as well :
Import CloudKit as you did then add this in your main.js : Vue.prototype.$CloudKit = CloudKit
Now, Cloudkit is available in your project with this.$CloudKit
More info here
PS: you may configure cloudkit in mounted in the app
I'm trying setup an express GraphQL server. Following a tutorial when I put the following in the server startup like this:
// ENTIRE SCHEMA IN MAIN FILE THIS WORKS!!!
...
var graphql = require('graphql');
const RootQuery = new graphql.GraphQLObjectType({
name: 'RootQuery',
description: 'The root query',
fields: {
viewer: {
type: graphql.GraphQLString,
resolve() {
return 'viewer!';
}
}
}
});
const Schema = new graphql.GraphQLSchema({
query: RootQuery
});
app.use('/graphql', graphqlHTTP({ schema: Schema }));
...
it works, returning the data 'viewer! But as I don't want everything in the main file, I tried to transfer this exact code to another file and import it like this:
//THIS DOES NOT WORK
...
var Schema = require('./build/models/graphql/schema');
app.use('/graphql', graphqlHTTP({ schema: Schema }));
...
I get the following error:
{
"errors": [
{
"message": "Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory."
}
]
}
I'm not sure what I'm doing wrong. In case this has anything to do with it, I am writing in es6 then transpiling back to 5 in a build script. Here's the build of the schema file:
// TRANSPILED SCHEMA
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var graphql = require('graphql');
var RootQuery = new graphql.GraphQLObjectType({
name: 'RootQuery',
description: 'The root query',
fields: {
viewer: {
type: graphql.GraphQLString,
resolve: function resolve() {
return 'viewer!';
}
}
}
});
var Schema = new graphql.GraphQLSchema({
query: RootQuery
});
exports.default = Schema;
And here is my package.json:
"express": "^4.13.4",
"express-graphql": "^0.5.3",
"graphql": "^0.6.0",
I've checked that only one graphql is in the node_modules folder. Does graphql expect the same INSTANCE across all modules, like a shared global instance? Does express-graphql use it's own version? How do I check? I'm new to node, is there a way to check the instances?
I don't think this is a GraphQL problem, but a problem with how you're using require and exports in JS. The problem is probably:
var Schema = require('./build/models/graphql/schema')
along with
var Schema = new graphql.GraphQLSchema({
query: RootQuery
});
exports.default = Schema;
You're not importing the same value that you're exporting. Try either exporting Schema as module.exports = Schema or importing it as Schema = require("./...").default
Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.
As the error indicates, this most likely has to do with more than one copy of GraphQL in your node_modules directory. Have you checked that? If there is more than one copy, you might be able to solve it by running npm dedupe if you're using npm version 2. If you're using npm 3, then most likely you've installed two different versions of the graphql module.
Either way, you have to make sure that after the compile step, express-graphql and your schema both point to the same copy of the graphql module.
If you think implementing & maintaining Graphql services (mainly their schemas), please have a look at graphqly. Here's a sample code to define Graphql schemas:
import graphly from "graphqly";
const gBuilder = graphly.createBuilder();
// define types, inputs ... (in any order)
gBuilder.type("Products").implements("List").def(`
products: [Product]!
`);
gBuilder.type("Product").def(`
id: ID!
name: String!
link: String
price: Int
`);
// we're too lazy to define a separate input, so we can `extend` other structure
gBuilder.input("ProductInput").ext("Product");
gBuilder.enum("ProductOrder").def(`
PRICE_DESCENDING
PRICE_ASCENDING
NEWEST
`);
I'm try to pass data between Vuejs views with vue-router.
//View1.vue
route: {
data: function (transition) {
transition.next({
message: "this is it!!"
});
}
}
I call next wiew with a click action button with:
//View1.vue
methods:{
showResult: function(){
this.$router.go('/View2');
}
}
but the data are not filled in the next view:
//View2.vue
<template>
<p>Message: {{ message }}</p>
</template>
Does somebody knows what's wrong with my usage of vue-router? I don't think I need to pass through services for this, right?
Working examples on jsfiddle (or jsbin, etc) are welcome :D
If View2 is a child component you can pass it using props:
//View1.vue
<view2-component :passedData='message'></view2-component>
Alternatively, I believe if you set data on the $route object from View1, since that object is shared between all vue instances, I believe it will be available application-wide.
//View1.vue
this.$router.myProps.message = message
But arguably the better way to share data is use a POJO - plain old javascript object and bind it to both views. To do this you typically need a shared state object and you can if you wish use Vuex for this although it is a little more complicated than a POJO.
I know this has already been answered, but if someone is here looking for a way to pass data to a route from a router, I use Meta Data.
Not sure if this is what the questioner meant or not but I think it is?
I personally prefer this to props just because I am more used to using it.
It allows for data to be easily passed and received without having to modify children.
Anyway here is a snippit and link!
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Homepage',
meta: {
logo:{
"/imgs/Normal-Logo.png"
}
}
},
{
path: '/admin',
name: 'Admin',
meta: {
logo:{
"/imgs/Admin-Logo.png"
}
}
},
]
})
In any children who want to use vars:
<logo :src="this.$route.meta.logo"/>
Ref:
https://router.vuejs.org/guide/advanced/meta.html