i'm reciving the error Variable "$id" of required type "String!" was not provided. Someone knows why?
In my backend (node-mongo-graphql)
Mutation:
type Mutation {
deleteAmbiente(_id: String!): Ambiente
}
Resolver:
async deleteAmbiente(_,_id, context) {
console.log("hi there!", _id)
}
In my front-end (vue + apollo)
async deleteAmbiente() {
try {
let id = this.item._id
const res = await apolloClient.mutate({
mutation: ELIMINAR_AMBIENTE,
variables: id, // id has a value, if i send "hello" from here, it doesn't work either
});
console.log(res)
} catch (err) {
err;
}
},
export const ELIMINAR_AMBIENTE = gql`
mutation deleteAmbiente(
$id: String!
){
deleteAmbiente(_id:$id){
nombre
}
}
`
Related
So I have a project using the latest Next js 13, React 18, Urql 3, and using typescript
Currently, I have issues when trying to query the urql from the getstaticprops function. My urql request needs a guest token, and I'm storing the token on session storage(other suggestions ?).
It has no issue when the query is running on the client, but I have it when querying inside the function.
My concern is related to the token reading, so the server cannot read the session storage value.
I'm asking what is the better and simplest way to make this work.
Does use cookies to store guest tokens will make this work?
Or the configuration that doesn't work?
This is my current config for urql.ts
import {
createClient,
ssrExchange,
dedupExchange,
cacheExchange,
fetchExchange,
} from "urql";
import { GRAPH_URL } from "#lib/constant/env";
import type { TypedDocumentNode } from "#urql/core";
const isServerSide = typeof window === "undefined";
const ssrCache = ssrExchange({
isClient: !isServerSide,
});
const client = createClient({
url: GRAPH_URL,
exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange],
fetchOptions: () => {
const token = sessionStorage.getItem("accessToken");
return {
headers: {
authorization: token ? `Bearer ${token}` : "",
},
};
},
});
const query = async (
query: TypedDocumentNode<any, object>,
variables?: Record<string, string | string[] | unknown>
) => {
try {
const response = await client.query(query, variables as any).toPromise();
return response;
} catch (error) {
if (error instanceof Error) console.error(error.message);
}
};
const mutation = async (
mutation: TypedDocumentNode<any, object>,
variables?: Record<string, string | string[] | unknown>
) => {
try {
const response = await client
.mutation(mutation, variables as any)
.toPromise();
return response;
} catch (error) {
if (error instanceof Error) console.error(error.message);
}
};
export { client, query, mutation, ssrCache };
And this some of the code for the blog index page
export const getStaticProps = async () => {
await fetchArticlesSummary();
return {
props: {
urqlState: ssrCache.extractData(),
},
revalidate: 600,
};
};
export default withUrqlClient(() => ({
url: GRAPH_URL,
}))(BlogPage);
This is for the fetchArticlesSummary
export const fetchArticlesSummary = async () => {
try {
const {
data: { listArticles },
}: any = await query(getListArticle);
return listArticles.items;
} catch (error) {
return {
notFound: true,
};
}
};
I also doing a setup on _app.tsx
export default function App({ Component, pageProps }: AppProps) {
if (pageProps.urqlState) {
ssrCache.restoreData(pageProps.urqlState);
}
return (
<Provider value={client}>
<Component {...pageProps} />
</Provider>
);
}
Thank you
I have followed urql documentation about server-side configuration and many others but still don't have any solutions.
How to execute code after action finished in vue js? this is my login action
login: async ({commit},loginDTO)=>{
return commit('login',loginDTO);
}
My login mutations is this:
login:(state, loginDTO)=>{
axios.post(loginEndpoint.login, loginDTO)
.then(resp => {
if(resp.data.statusCode == 1) {
state.user.userId = resp.data.userId;
state.user.response = resp.data.responseText;
localStorage.setItem("token", "token")
state.isLogin = true;
router.push({name: 'Systems'});
}
else{
alert(66);
state.user.response = resp.data.responseText;
}
})
.catch(err => {
})
}
And I call it from component like this:
methods:{
...mapActions(['login']),
async login1(){
const loginDTO = {
Username : this.user.Username,
Password: this.user.Password
};
await this.$store.dispatch('login',loginDTO);
this.$toastr.s("Message", "");
}
}
Now I need toast message but after action is completed.
Updated.
Make use of async-await, and await for async action to complete and sync mutation to commit before you show the toast:
// action
login: async ({commit},loginDTO)=>{
try {
const { data } = await axios.post(loginEndpoint.login, loginDTO)
commit('login', data.userId, data.responseText, true);
} catch(error) {
commit('login', null, error.message, false);
}
}
// mutation
login: (state, userId, response, isLogin) {
state.user.userId = userId;
state.user.response = response;
state.isLogin = isLogin
}
methods:{
...mapActions(['login']),
async login1(){
const loginDTO = {
Username : this.user.Username,
Password: this.user.Password
};
await this.$store.dispatch('login',loginDTO);
this.$toastr.s("Message", "");
}
}
I think all you need to do is call the toast function after the action complete as usual, callback function after ajax returns 200, for example, I used
https://github.com/ankurk91/vue-toast-notification
then run it like so on the callback
this.$toast.open('You did it!');
(make sure the toast has been registered on your vue instance)
I am trying to split up my schema of GraphQL API into separate ones.
Having familiarized with a huge number of them I decided on this one below using "extend"
( I also wanted to use .graphql file extension for them but as I've got there is only one way to do that - it is with the use of webpack. I am not really good at it so I tried to make it work at first with .js files)
BUT: I cannot cope with this simple task because I either have TypeError: Cannot read property 'kind' of undefined or Invalid schema passed, or something else pops up...
What am I doing wrong here and what is the best practice/approach to split up and stitch the Schema?
Thanks in advance!
server.js
import express from "express";
import { ApolloServer, gql } from "apollo-server-express";
import { makeExecutableSchema } from 'graphql-tools';
import * as mongoClient from "./config";
import * as _ from 'lodash';
import { UserSchema, UserResolvers } from "./graphql.partials/user.api";
const port = process.env.PORT || 8080;
const RootSchema = gql`
type Query {
_empty: String
}
type Mutation {
_empty: String
}
`
const RootResolvers = {
};
const app = express();
const schema = makeExecutableSchema({
typeDefs: [RootSchema, UserSchema],
resolvers: _.merge(RootResolvers, UserResolvers)
});
const apolloServer = new ApolloServer({ schema });
apolloServer.applyMiddleware({ app });
app.listen({ port }, () => {
console.log(
`Server ready at http://localhost:${port}${apolloServer.graphqlPath}`
);
});
user schema
const { gql } = require("apollo-server-express");
import User from '../models/User';
export const typeDefs = gql`
extend type Query {
users: [User]
user(id: String): User
}
extend type Mutation {
addUser(email: String, password: String): User
deleteUser(id: String!): User
updateUser(user: UserInput): User
}
type User {
id: ID!
firstName: String
lastName: String
email: String!
password: String!
confirmed: Boolean
role: String
}
input UserInput {
id: ID!
firstName: String
lastName: String
email: String
password: String
confirmed: Boolean
role: String
}
`
export const UserResolvers = {
Query: {
users: async (obj, args, context, info) => {
try {
const res = await User.find();
return res;
} catch (err) {
return err.message;
}
},
user: async (obj, args, context, info) => {
try {
const res = User.findById(args['id']);
return res;
} catch (e) {
return e.message;
}
}
},
Mutation: {
addUser: async (obj, args, context, info) => {
try {
const res = await User.create(args);
return res;
} catch (err) {
return err.message;
}
},
deleteUser: async (obj, args, context, info) => {
try {
return User.findByIdAndDelete(args['id']);
} catch (e) {
return e.message;
}
},
updateUser: async (obj, args, context, info) => {
try {
return User.findByIdAndUpdate(args.user.id, args.user)
} catch (e) {
return e.message;
}
}
}
}
There is no export named UserSchema in your file. You have two named exports -- UserResolvers and typeDefs. As a result, when you attempt to import UserSchema, its value is undefined.
i'm trying to use this kind of structure.
I have my axios calls in a service file and then call them in vue files.
So i have this js file
const DashboardService = {
getStationList() {
let url = '/api/stations/list'
ApiService.get(url) //ApiService is an Axios wrapper
.then(response => {
console.log(response.data) //data are logged, function is called
response.data
})
}
}
export default DashboardService
Then in the Vue File i have this:
import DashboardService from '#/_services/admindashboard.service'
export default {
methods: {
getMarkers() {
let result = DashboardService.getStationList()
console.log(result) //undefined
}},
mounted() {
this.getMarkers()
}
}
I can't understand why result is undefined because che getStationList() function gets called... when the component is mounted the functions should have returned the response... how can i solve this situation?
getStationList is an async function, so you'll need to await it's result (or use then). For example:
async mounted() {
this.markers = await DashboardService.getStationList();
},
Also see this question for more details.
Next, you are missing a return in the implementation of getStationList.
const DashboardService = {
getStationList() {
const url = '/api/stations/list';
ApiService.get(url).then(response => {
return response.data;
});
},
};
or perhaps:
const DashboardService = {
async getStationList() {
const url = '/api/stations/list';
try {
const response = await ApiService.get(url);
return response.data;
} catch (error) {
console.error(error);
return [];
}
},
};
The result is undefined because getStationList is not returning anything.
You can consider turning your api call into an async function that returns the result.
const DashboardService = {
async getStationList() {
let url = '/api/stations/list';
return ApiService.get(url);
}
}
export default DashboardService
And in your component
methods: {
async getMarkers() {
let result = await DashboardService.getStationList();
console.log(result);
}
},
If you don't want to use the async await syntax. You can return a the promise from your service and utilize the result on your component, as so:
methods: {
getMarkers() {
DashboardService.getStationList().then(result => {
console.log(result);
});
}
},
I meet something strange and found no answer.
I met the warning as below:
Possible Unhandled Promise Rejection(id:0)
TypeError: undefined is not a function (evaluating '_api2.default.getResp(URL, "GET")'....
Below is shortened code like what my source code is.
The "Pass Code" works fine and "Warning Code" shows warning as above.
Why Api.getResp goes wrong but Api.loggedin.getResp works OK? They are so similar!!
Warning Code
const GetData = {
async fetchFeed() {
console.log(`Api = ${Api}`); // Api = [Object Object]
console.log(`Api.getResp = ${Api.getResp}`); // Api.getRest = undefined
const { success, content } = await Api.getResp(`${URL}`, 'GET');
if (success) {
.....
}
},
};
module.exports = FetchApi;
Pass Code
const GetData2 = {
async syncData(): void {
const { success, content } = await Api.loggedin.getResp(`${URL}`, 'GET');
.....
}
}
API
const Api = {
async getResp(url: string, method: string): Object {
try {
const response = await fetch(url,
{ method,
null,
{ 'content-type' : 'application/json' },
});
......
} catch (error) {
console.log(`fetch url: ${url}, error: ${error}`);
}
return result;
},
loggedin: {
async getResp(url: string, method: string): Object {
const accessToken = await this._getAccessToken();
....
return result;
},
},