graphQl と Apollo を使用してデータを取得する簡単な方法
2484 ワード
やあ、
今日は、graphql と apollo クライアントを使用してデータをフェッチする方法を紹介します.
ここではまず、クライアント用とサーバー用の 2 つの個別のフォルダーが必要です.
サーバーにgraphql、apollo-clientなどをインストールします.
ここでは、クエリを使用してデータを表示するためにgraphqlプレイグラウンドを使用しています
データベースについては、データベースプログラムを使用していません.自分で作成して、それをいじっています.
サーバーに何があるか見てみましょう
その前に2つの重要なことを知っておく必要があります
スキーマ:
これは、スキーマを定義して文字列として格納するために使用する、人間が判読できるスキーマ定義言語 (または SDL) です.
型システム:
GraphQL スキーマの最も基本的なコンポーネントはオブジェクト タイプです.これは、サービスからフェッチできるオブジェクトの種類とそのフィールドを表すだけです. GraphQL スキーマ言語で
スキーマ
typedef - サービスから取得できるオブジェクトの種類とそのフィールドを表すだけです
そして最後に、エクスプレスまたはhttpを使用してこれを実行する必要があります.ここではエクスプレスを使用しています
クライアントの場合、フレームワークのいずれかを使用してそのデータを取得できます
そしてそれを表示する
次の投稿で、サーバーからそのデータを取得してクライアントに表示する方法を確認できます
さよなら!
今日は、graphql と apollo クライアントを使用してデータをフェッチする方法を紹介します.
ここではまず、クライアント用とサーバー用の 2 つの個別のフォルダーが必要です.
サーバーにgraphql、apollo-clientなどをインストールします.
ここでは、クエリを使用してデータを表示するためにgraphqlプレイグラウンドを使用しています
データベースについては、データベースプログラムを使用していません.自分で作成して、それをいじっています.
サーバーに何があるか見てみましょう
その前に2つの重要なことを知っておく必要があります
スキーマ:
これは、スキーマを定義して文字列として格納するために使用する、人間が判読できるスキーマ定義言語 (または SDL) です.
型システム:
GraphQL スキーマの最も基本的なコンポーネントはオブジェクト タイプです.これは、サービスからフェッチできるオブジェクトの種類とそのフィールドを表すだけです. GraphQL スキーマ言語で
スキーマ
const graphql = require("graphql");
const {
GraphQLObjectType,
GraphQLSchema,
GraphQLInt,
GraphQLString,
GraphQLList,
} = graphql;
//mock data
const data1 = require("../database/mockdata3.json");
// this is typedef we can see this after
const UserType = require("./TypeDefs/UserType");
const RootQuery = new GraphQLObjectType({
name: "RootQueryType",
fields: {
getAllUsers: {
type: new GraphQLList(UserType),
// you can pass argument
args: { Name: { type: GraphQLString } },
resolve(parent, args) {
// write return what you need back
return data1;
},
},
},
});
// finally we are going to export this
module.exports = new GraphQLSchema({ query: RootQuery });
typedef - サービスから取得できるオブジェクトの種類とそのフィールドを表すだけです
const UserType = new GraphQLObjectType({
name: "User",
fields: () => ({
//any fields you can define but you must enter the data-type
Name: { type: GraphQLString },
Age: { type: GraphQLInt },
}),
});
module.exports = UserType;
そして最後に、エクスプレスまたはhttpを使用してこれを実行する必要があります.ここではエクスプレスを使用しています
const express = require("express");
const app = express();
const PORT = 6969;
const { graphqlHTTP } = require("express-graphql");
const schema = require("./Schemas/Schema");
const cors = require("cors");
app.use(cors());
app.use(express.json());
app.use(
"/data",
graphqlHTTP({
schema,
// this is graphql playground field
graphiql: true,
})
);
app.listen(PORT, () => {
console.log("Server running");
});
クライアントの場合、フレームワークのいずれかを使用してそのデータを取得できます
そしてそれを表示する
次の投稿で、サーバーからそのデータを取得してクライアントに表示する方法を確認できます
さよなら!
Reference
この問題について(graphQl と Apollo を使用してデータを取得する簡単な方法), 我々は、より多くの情報をここで見つけました https://dev.to/karthik_n/simple-way-to-fetch-data-using-graphql-and-apollo-5235テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol