currently i use apollo-client in react-navie and strapi as the backend. i try to upload images which get by ImageCropPicker to server by use apollo-client, but it always show "‘Upload’ scalar serialization unsupported." error . is there anyone know how to fix it?
export const UploadScalar = new GraphQLScalarType({
name: 'Upload',
description: 'The `Upload` scalar type represents a file upload.',
parseValue(value: any) {
return value
},
serialize(value: any) {
return value
},
parseLiteral(ast) {
throw new Error('‘Upload’ scalar literal unsupported.')
},
})
Related
I'm having an issue where I try to set my VectorSource with my features array from my state but I get "feature.getId is not a function".
What I would like is the have my feature displayed depending on my state, because i'll have filter and I need to fave feature on map reacting with filters.
How can i set my features list in the feature in my VectorSource ?
I'm getting my state array like this :
getAllFeature() {
return this.$store.getters.GET_ALLFEATURES;
},
then i'm trying to passe the array in the vectorSource
source: new VectorSource({
format: new GeoJSON(),
features: this.getAllFeatures,
}),
Notice that I modified the form of my array comparing to the native geojson file I have
getGeoJSONData() {
axios
.all([
axios.get("http://localhost:8080/germany.geojson"),
axios.get("http://localhost:8080/france.geojson"),
])
.then(
axios.spread((...responses) => {
const features = [];
responses.forEach((res) => {
features.push(res.data.features.flat());
});
this.$store.dispatch("LOAD_FEATURES", features.flat());
})
);
},
},
Even if I try to set the strict same array that I receive from one of the Geojson, i have this error.
Any help would be appreciated
Thanks in advance
I am using Vuejs and Jest. I have following statement in my component:
...mapGetters('type', [
'selectedAddressType',
'checkDeliveryType',
]),
const keyToDisplayMessage = `${this.checkDeliveryType.toUpperCase()}_${this.selectedAddressType.toUpperCase()}`;
and in test file, I have following code:
test('If a check is requested', () => {
const selectedCheckAddress = {
addressLine1: 'test',
city: 'test',
state: 'test',
zipCode: '12345',
};
getters.selectedAddressType.mockReturnValue('Home');
getters.checkDeliveryType.mockRejectedValue('Regular');
expect(wrapper.vm.pageTitle).toStrictEqual('Request Submitted');
expect(wrapper.html()).toMatchSnapshot();
});
it is giving an error as
TypeError: this.checkDeliveryType.toUpperCase is not a function
How can we resolve this?
.toUpperCase() is a method provided by the String-class. It seems your variable this.checkDeliveryType isn't a string, hence you can not call this method (as it does not exist on whatever type your variable is at that point in time).
Either fix the type or cast the value manually to a string before and call .toUpperCase() on it afterwards. One way would be:
const checkDeliveryTypeStr = `${this.checkDeliveryType}`;
const keyToDisplayMessage = `${checkDeliveryTypeStr.toUpperCase()}_${this.selectedAddressType.toUpperCase()}`;
But in general it would be a better idea to fix the type correctly in your entire flow.
I am developing a react native application with apollo client and I need to have 2 screens:
Screen A: displays a list of profiles
Screen B: displays some filters which have to be applied to Screen A
So my idea was to use apollo client cache to save the state of the filters in screen B, and then come back to screen A and somehow refetch with the new filters applied.
Since there are a couple of filters that I need to send on each request to the server, I also was thinking about using an input type so I can send my filters in the form of an object instead of a list of comma-separated parameters.
So looking at the docs from apollo client, there is a section to manage the local stage. In there, I found a sub-section called Using #client fields as variables. Basically, this part tells you how to grab whatever filters were stored in the cache and send it as part of the query.
However, I always get the following error:
Invariant Violation: Missing selection set for an object of type ProfileParameters returned for query field profileParameters
some code:
This is how I initialized the cache-store, for now, it only contains page and pageSize but it will contain more parameters.
const cache = new InMemoryCache({
cacheRedirects: {
Query: {
profile: (_, {id}, {getCacheKey}) =>
getCacheKey({__typename: 'Profile', id: id}),
},
},
});
cache.writeData({
data: {
profileParameters: {
__typename: 'ProfileParameters',
page: 0,
pageSize: 25,
},
},
});
const client = new ApolloClient({
uri: 'http://192.168.1.102:3000/graphql',
cache: cache,
resolvers: {},
});
And this is the query component and the query:
const PROFILES_QUERY = gql`
query getFilteredProfiles($type: String, $parameters: ProfileParameters) {
profileParameters #client #export(as: "parameters")
profiles(type: $type, parameters: $parameters) {
id
name
termOfEntry
sport
sportPosition
gpa
avatarUrl
imageUrl
nationality
countryOfResidence
dateOfBirth
annualBudget
career
satScore
toeflScore
graduationDate
}
}
`;
<Query
query={PROFILES_QUERY}
variables={{
type: this.PROFILE_TYPE,
}}>
...
</Query>
There is a type variable that is being passed in the variables object. That comes from a local variable in the class.
Also, screen B does not exist yet, but the cache is being initialized and I want to read whatever is in there so I can send those filters to the server.
I am starting to lose my mind in debugging an application that I inherited from a fellow developer who is absent.
I have narrowed down the problem to the following place in code (php files are checked, Vue instances are initialised, there are no syntax errors).
This is my the component that gets initialised:
var RadniStol = Vue.component('radnistol', {
template: '#template-RadniStol',
data() {
return {
tableData: [],
requestData: {
sort: "ID",
order: "DESC"
}
}
},
methods: {
reloadTable: function (event) {
data = this.requestData;
this.$http.post('php/get/radni_stol.php', data).then(response => {
console.log(response.data.bodyText);
this.tableData = response.data.records;
});
},
.
.
.
The PHP file that gets called with the POST method is working correctly, querying the database and echoing the response in a JSON format.
The thing that is making me pull out my hair is the following: the console.log(response.data) outputs the following into the console:
{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}
It is an JSON object that I expected to have but when trying to assign it to the data of the component with:
this.tableData = response.data;
or any other way… response.data.records returns ‘undefined’ in the console. I have tryed with JSON.parse() but no success.
When logging types to console:
response variable is a response object with a status 200 and body and bodyText containing the data from the database.
response.data is a string type containing the string JSON with the data from the database.
When trying to use JSON.parse(response.data) or JSON.parse() on anything in the callback of the POST method I get the following error in the console:
RadniStol.js?version=0.1.1:17 Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 0
at JSON.parse (<anonymous>)
at VueComponent.$http.post.then.response (RadniStol.js?version=0.1.1:17)
at <anonymous>
I am really starting to lose my mind over this issue, please help!
Thank you
If response.data is string, with JSON inside, then to access the records field, you should decode it like this:
JSON.parse(response.data).records
Not sure this has something to do with PHP or Vue.js, it is just plain javascript issue.
If it not decodes, than problem is definitely in response.data. For example
{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}
is not a valid JSON, because key "..." needs to have some value.
But it seems to me that response.data is already parsed.
What I suggest you to do, is to write handler of the response as separate function, make response object that mimics actual response object by hand, and then test it separately from request. So you could show us request object and function that works with it.
I had the same error and fixed it.
Result will be response.body not response.data.
Here is my code:
getS: function(page) {
this.$http.get('vue-manager?page=' + page).then((response) => {
var data = JSON.parse(response.body);
this.student = data.data.data;
this.pagination = data.pagination;
});
},
i want to check the returned value of $http.get() but i get undefined value. Here is my vue js code:
var vm = new Vue({
el: '#permissionMgt',
data: {
permissionID: []
},
methods:{
fetchPermissionDetail: function (id) {
this.$http.get('../api/getComplaintPermission/' + id, function (data) {
this.permissionID = data.permissionID; //permissionID is a data field of the database
alert(this.permissionID); //*****this alert is giving me undefined value
});
},
}
});
Can you tell me thats the problem here?.. btw $http.get() is properly fetching all the data.
You need to check what type is the data returned from the server. If #Raj's solution didn't resolve your issue then probably permissionID is not present in the data that is returned.
Do a colsole.log(data) and check whether data is an object or an array of objects.
Cheers!
Its a common js error. Make the following changes and it will work.
fetchPermissionDetail: function (id) {
var self = this; //add this line
this.$http.get('../api/getComplaintPermission/' + id, function (data) {
self.permissionID = data.permissionID; //replace "this" with "self"
});
},
}
the reason is this points to window inside the anonymous function function()
This is a well known js problem. If you are using es2015 you can use arrow syntax (() => { /*code*/ }) syntax which sets this correctly