GraphqlでGraphqlを使用していますが、クライアントでは使用できません。

Question

次のリクエストは、GraphiQLから突然変異を投稿しても、アプリケーションのクライアント側では機能しません。

「POST http://localhost:3001/graphql 400（Bad Request）」エラーがコンソールに表示されます。

const post = { 
    userId: store.user.id, 
    imageURLs: store.post.request.aws.imageURLs, 
    tags: store.post.tags, 
    link: store.post.link, 
}; 

const query = `mutation CreatePost($post: PostInput) { 
    createPost(post: $post) { 
    user, 
    tags, 
    imageURLs, 
    link 
    } 
}`; 

return fetch('/graphql', { 
    method: 'post', 
    headers: { 
    Accept: 'application/json', 
    'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
    query, 
    variables: { 
     post, 
    }, 
    }), 
    credentials: 'include', 
}) 

何が起こっているのか分かりませんか？

Answer 1

あなたが持っているものの多くは、あなたが入力ペイロードおよびタイプに変異機能を持っていることを除いて、うまくのようだ：ここで

mutation CreatePost($post: PostInput) { ... // CreatePost is not needed 

は、より良いあなたが変異のために必要なものを説明するために、迅速な作業例ですInputObjectを使用して、フェッチ/要求のノードフェッチを使用して：

fetching.js

let postUpdate = { 
    id: randomInt, 
    name: newPost.name 
}; 

let url = 'http://localhost:4001/graphql'; 
let query = `mutation ($postUpdate: PostInput) { 
    updatePost(postArgs: $postUpdate) { id, name } 
}`; 

let mutateInit = { 
    mode: 'cors', 
    method: 'post', 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 
    body: JSON.stringify({ 
    query, 
    variables: { 
     postUpdate 
    }, 
    }) 
}; 

fetch(url, mutateInit) 
.then(res => res.text()) 
.then(out => { 
    console.log('Mutate response:', out); 
}); 

そこに他の例に基づいて

Schema.js

... 
const PostInput = new GraphQLInputObjectType({ 
    name: 'PostInput', 
    description: 'Mutation Input', 
    fields:() => ({ 
    num: {type: new GraphQLNonNull(GraphQLInt)}, 
    name: {type: new GraphQLNonNull(GraphQLString)} 
    }) 
}); 

const Mutation = new GraphQLObjectType({ 
    name: 'PostMutations', 
    description: 'Mutations for the Posts', 
    fields:() => ({ 
    updatePost: { 
     type: Post, 
     args: { 
     postArgs: { type: PostInput } 
     }, 
     resolve: (value, { postArgs }) => { 
     let post = Object.assign({}, postArgs); 
     return post; 
     } 
    } 
    }) 
}); 
... 

、多くの混乱を引き起こす可能性があり、いくつかのあいまいな変数との問題があるようです。この例では、実際のクエリで必要とされるさまざまな変数を見ることができます。

mutation ($<mutation_payload>: <Input Type>) { <mutation_function>(<function_argument_name>: $<mutation_payload>) { <returned fields> } }

を限り、これらはすべて正常に上記のセクションに解決されると、フェッチクエリが滞りなく通過する必要があります。それからも、より多くの意味を作るために、のは、このクエリを参照しているものを見てみましょう彼らがいない場合は、ペイロードがどこに行かなくても、nullでないnullを返すことはできませんから、何かが入力のように失われているためGraphQLクエリ自体について不平を言うエラーまでさまざまな問題があります。タイプ。