GraphQL Subscriptions with Apollo Server and React - #14

Опубликовано: 04 Июнь 2024
на канале: Everyday Be Coding

174

#GraphQL #ApolloServer #ReactJS #WebDevelopment #RealTimeData #JavaScript #FullStackDevelopment #APIs #WebSockets #GraphQLSubscriptions #FrontEndDevelopment #BackEndDevelopment #JavaScriptFrameworks #ProgrammingTutorials #CodeWithReact #GraphQLAPI #SoftwareEngineering #TechTutorials #DevCommunity #codingtips

Implementing GraphQL subscriptions with Apollo Server and React allows real-time data updates in your application. Here's a step-by-step guide on how to do it:

Setting up Apollo Server:
Install required packages:

Code
npm install apollo-server graphql
Create your Apollo Server:

JavaScript code
const { ApolloServer, PubSub } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

const pubsub = new PubSub();

const server = new ApolloServer({
typeDefs,
resolvers,
context: ({ req, res }) = ({ req, res, pubsub }),
});

server.listen().then(({ url }) = {
console.log(`🚀 Server ready at ${url}`);
});
Define your GraphQL schema (schema.js):

Code:
type Post {
id: ID!
content: String!
}

type Query {
posts: [Post!]!
}

type Mutation {
createPost(content: String!): Post!
}

type Subscription {
postCreated: Post!
}
Implement your resolvers (resolvers.js):

JavaScript code:
let posts = [];

const resolvers = {
Query: {
posts: () = posts,
},
Mutation: {
createPost: (parent, { content }, { pubsub }) = {
const post = { id: String(posts.length + 1), content };
posts.push(post);
pubsub.publish('POST_CREATED', { postCreated: post });
return post;
},
},
Subscription: {
postCreated: {
subscribe: (parent, args, { pubsub }) = {
return pubsub.asyncIterator('POST_CREATED');
},
},
},
};

module.exports = resolvers;
Setting up Apollo Client with React:
Install required packages:

npm install @apollo/client graphql
Create your Apollo Client:

JavaScript code
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

const link = new WebSocketLink({
uri: 'ws://localhost:4000/graphql',
options: {
reconnect: true,
},
});

const client = new ApolloClient({
link,
cache: new InMemoryCache(),
});

export default client;
Use ApolloProvider to wrap your React app:

Code :
import React from 'react';
import { ApolloProvider } from '@apollo/client';
import client from './client';
import PostList from './PostList';

function App() {
return (
ApolloProvider client={client}
div
h2 Posts /h2
PostList /
/div
/ApolloProvider
);
}

export default App;
Implement your React component (PostList.js):

JavaScript code
import React from 'react';
import { useQuery, useSubscription } from '@apollo/client';
import { gql } from 'graphql-tag';

const POSTS_QUERY = gql`
query {
posts {
id
content
}
}
`;

const POST_CREATED_SUBSCRIPTION = gql`
subscription {
postCreated {
id
content
}
}
`;

function PostList() {
const { loading, error, data } = useQuery(POSTS_QUERY);
const { data: subscriptionData } = useSubscription(POST_CREATED_SUBSCRIPTION);

if (loading) return p Loading.../p;
if (error) return pError :(/p;

const posts = subscriptionData ? [...data.posts, subscriptionData.postCreated] : data.posts;

return (
ul
{posts.map((post) = (
li key={post.id} {post.content}/li
))}
/ul
);
}

export default PostList;
Now, your React application should be able to subscribe to new posts in real-time using GraphQL subscriptions with Apollo Server and React. Make sure your Apollo Server is running alongside your React application for this setup to work.

Смотрите видео GraphQL Subscriptions with Apollo Server and React - #14 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Everyday Be Coding 04 Июнь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 17 раз и оно понравилось людям.

6,97