我是否錯誤地使用GraphQL？我不知道它是如何將數據發送給我的

Question

因此，我正在開發一個項目，希望我使用GraphQL來創建我的API。我也在使用NodeJS和Express。通常情況下，我只需在express中設置一個端點，然後使用客戶端的axios調用它。在服務器的端點內部，我可以從req.body中獲取信息，並按照我的需要進行處理。我在哪裏可以使用GraphQL以相同的方式操作數據？感覺就像我所做的只是查詢數據，而不是操縱它，然後像我想要的那樣發回它。

這是我有：

架構graphql：

import GraphQLDate from 'graphql-date'; 
 

 
const { 
 
    GraphQLObjectType, 
 
    GraphQLString, 
 
    GraphQLInt, 
 
    GraphQLSchema, 
 
    GraphQLList, 
 
    GraphQLNonNull, 
 
} = require('graphql'); 
 

 

 
const SecretMessage = new GraphQLObjectType({ 
 
    name: 'secretMessage', 
 
    fields:() => ({ 
 
    id: { type: GraphQLString }, 
 
    name: { type: GraphQLString }, 
 
    message: { type: GraphQLString }, 
 
    expirDate: { type: GraphQLDate }, 
 
    }), 
 
}); 
 

 
const RootQuery = new GraphQLObjectType({ 
 
    name: 'RootQueryType', 
 
    fields: { 
 
    secretMessage: { 
 
     type: SecretMessage, 
 
     args: { 
 
     name: { type: GraphQLString }, 
 
     }, 
 
     resolve(parVal, args) { 
 
     return `${args.name}test`; 
 
     }, 
 
    }, 
 
    }, 
 
}); 
 

 
module.exports = new GraphQLSchema({ 
 
    query: RootQuery, 
 
});

我的節點服務器：

import express from 'express'; 
 
import path from 'path'; 
 
import bodyParser from 'body-parser'; 
 
import webpack from 'webpack'; 
 

 
const config = require('../webpack.config.js'); 
 
const expressGraphQL = require('express-graphql'); 
 
const schema = require('./schema.js'); 
 

 

 
const compiler = webpack(config); 
 
const port = process.env.PORT || 3000; 
 

 
const app = express(); 
 

 

 
app.use(bodyParser.json()); 
 
app.use(bodyParser.urlencoded({ extended: true })); 
 

 
app.use(express.static('public')); 
 
app.use(express.static('css')); 
 
app.use(express.static('images')); 
 

 
app.use('/graphql', expressGraphQL({ 
 
    schema, 
 
    graphiql: true, 
 
})); 
 

 
app.get('/', (req, res) => { 
 
    res.sendFile(path.join(__dirname, '../public/src', 'index.html')); 
 
}); 
 

 
app.get('#', (req, res) => { 
 
    console.log('Pound hashtag works'); 
 
}); 
 

 
app.post('passphrase', (req, res) => { 
 
    console.log('passphrase tag works'); 
 
}); 
 

 
app.get('*', (req, res) => { 
 
    res.sendFile(path.join(__dirname, '../public/src', 'index.html')); 
 
}); 
 

 
app.listen(port, (error) => { 
 
    if (error) { 
 
    console.log('This is the express error: ', error); 
 
    } else { 
 
    console.log('Express is listening on port: ', port); 
 
    } 
 
});

axios({ 
 
     method: 'post', 
 
     url: '/graphql', 
 
     data: JSON.stringify({ 
 
     query: `secretMessage(name: "${this.state.name}") {name}`, 
 
     }), 
 
    }).then((response) => { 
 
     console.log('This is the response from the axios call: ', response); 
 
    }).catch((error) => { 
 
     console.log('This is the error from the main axios call: ', error); 
 
    });

當我做了愛可信後調用/ graphql，我只是得到一個400錯誤的請求錯誤。

字符串插值旁邊的'測試'事情是我只是想看看我是否可以操縱那裏的數據。儘管我不知道如何在郵遞員中測試它。有什麼想法嗎？

Answer 1

假設您使用的是express-graphql或類似的中間件，您的GraphQL端點將可以使用POST和GET請求進行訪問。

使用POST：

1. 變更請求的URL來匹配您的服務器的GraphQL端點
2. 確保該請求的方法是POST，沒有得到
3. 在Body，選擇x-www-form-urlencoded
4. 將query添加爲key，並將您的整個查詢字符串作爲value
5. 如果您有任何變量，請添加一個variables密鑰並將它們包括爲value（它們需要格式正確的JSON）。

使用GET：

1. 變更請求的URL來匹配您的服務器的GraphQL端點
2. 確保該請求的方法是GET
3. 添加query爲key和你的整個查詢字符串爲valueParams
4. 如果您有任何變量，請添加variables參數並將它們包括爲value（它們需要格式正確的JSON）。

或者...

如果你正在構建一個GraphQL服務器，你可能會發現更容易暴露一個圖形我 QL終端用於測試你的查詢。你可以閱讀更多關於它here。

它烤成兩個graphql-server-express（見文檔here）和express-graphql（文檔here）。

編輯：就操縱請求中的數據而言：是的，解析器函數是您可以讀取請求並指定要返回的數據的位置。但是，每個resolve()函數都綁定到特定字段，該字段返回特定類型。查詢和變化本身不過是「根查詢」或「根變異」類型的字段，這就是爲什麼它們也具有解析功能。

您的secretMessage查詢解析爲secretMessage類型，但您將其解析爲字符串。如果您嘗試運行該查詢，它將始終返回null。相反，如果你希望它返回與您根據您傳遞的參數修改名稱屬性的對象，你可以這樣做：

resolve(parVal, args) { 
    return { name: `${args.name}test` }; 
}, 

現在，如果你執行類似的查詢：

query MyQuery { 
    secretMessage(name: "John") { 
    name 
    } 
} 

您將獲得：

{ 
    "data": { 
    "secretMessage": { 
     "name": "Johntest" 
    } 
    } 
} 

你也可以指定你的name領域的解析器會達到同樣的效果。如何以及何時使用解析器取決於你想要達到的目標。更詳細的解釋超出了這個問題的範圍，但我鼓勵您深入瞭解官方文檔並更好地瞭解解析器的工作方式。然後你可以在這裏詢問跟進問題（如果他們還沒有被問到！）。