Использование GraphQL в JavaScript

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
 
const app = express();
 
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);
 
const root = {
  hello: () => 'Hello, GraphQL!'
};
 
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));
 
app.listen(4000, () => {
  console.log('GraphQL сервер запущен на порту 4000');
});

const mongoose = require('mongoose');
 
mongoose.connect('mongodb://localhost:27017/graphql-db', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});
 
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'Ошибка подключения к MongoDB:'));
db.once('open', () => {
  console.log('Успешное подключение к MongoDB');
});

require('dotenv').config();
 
const app = express();
const PORT = process.env.PORT || 4000;
const DB_URI = process.env.MONGODB_URI;

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
  customFormatErrorFn: (error) => {
    console.error(error);
    return {
      message: error.message,
      locations: error.locations,
      stack: error.stack ? error.stack.split('\n') : [],
      path: error.path
    };
  }
}));

const Redis = require('ioredis');
const redis = new Redis({
  host: process.env.REDIS_HOST,
  port: process.env.REDIS_PORT
});
 
const cacheMiddleware = async (req, res, next) => {
  const key = req.body.query;
  try {
    const cached = await redis.get(key);
    if (cached) {
      return res.json(JSON.parse(cached));
    }
    next();
  } catch (error) {
    next();
  }
};

const jwt = require('jsonwebtoken');
 
const authMiddleware = async (req) => {
  const token = req.headers.authorization;
  if (token) {
    try {
      const user = jwt.verify(token, process.env.JWT_SECRET);
      req.user = user;
    } catch (err) {
      throw new Error('Недействительный токен');
    }
  }
};
 
app.use('/graphql', graphqlHTTP((req) => ({
  schema: schema,
  rootValue: root,
  graphiql: true,
  context: { user: req.user }
})));

const winston = require('winston');
 
const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' })
  ]
});
 
if (process.env.NODE_ENV !== 'production') {
  logger.add(new winston.transports.Console({
    format: winston.format.simple()
  }));
}

const cors = require('cors');
 
app.use(cors({
  origin: process.env.ALLOWED_ORIGINS.split(','),
  methods: ['POST'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

process.on('uncaughtException', (error) => {
  logger.error('Необработанное исключение:', error);
  process.exit(1);
});
 
process.on('unhandledRejection', (reason, promise) => {
  logger.error('Необработанное отклонение промиса:', reason);
});

graphql
type User {
  id: ID!
  name: String!
  email: String
  posts: [Post]
  age: Int
  isActive: Boolean
}
 
type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

const resolvers = {
  Query: {
    user: async (parent, { id }, context) => {
      return await User.findById(id);
    },
    posts: async () => {
      return await Post.find();
    }
  },
  User: {
    posts: async (parent) => {
      return await Post.find({ authorId: parent.id });
    }
  }
};

graphql
type Query {
  user(id: ID!): User
  posts(limit: Int, offset: Int): [Post]
  searchUsers(query: String): [User]
}

graphql
type User {
  id: ID!
  name: String!
  email: String! @deprecated(reason: "Use contactEmail instead")
  contactEmail: String!
  privateData: String @auth(requires: ADMIN)
}

graphql
interface Node {
  id: ID!
}
 
type User implements Node {
  id: ID!
  name: String!
}
 
type Post implements Node {
  id: ID!
  title: String!
}
 
union SearchResult = User | Post
 
type Query {
  search(query: String!): [SearchResult]
  node(id: ID!): Node
}

const resolvers = {
  Query: {
    user: async (parent, { id }) => {
      try {
        const user = await User.findById(id);
        if (!user) {
          throw new Error('User not found');
        }
        return user;
      } catch (error) {
        throw new Error(`Failed to fetch user: ${error.message}`);
      }
    }
  }
};

const DataLoader = require('dataloader');
 
const userLoader = new DataLoader(async (userIds) => {
  const users = await User.find({ _id: { $in: userIds } });
  return userIds.map(id => users.find(user => user.id === id));
});

graphql
input CreateUserInput {
  email: String! @pattern(regexp: "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$")
  age: Int! @range(min: 0, max: 120)
  username: String! @length(min: 3, max: 20)
}

const resolvers = {
  User: {
    posts: async (parent, args, context) => {
      const batch = await context.postLoader.loadMany(parent.postIds);
      return batch.filter(post => post != null);
    }
  }
};

graphql
fragment UserFields on User {
  id
  name
  email
  avatar
}
 
query GetUsers {
  users {
    ...UserFields
    posts {
      id
      title
    }
  }
}

const batchUsers = async (keys, { loaders }) => {
  const users = await Users.find({ id: { $in: keys } });
  return keys.map(key => users.find(user => user.id === key));
};
 
const userLoader = new DataLoader(keys => batchUsers(keys, context));

graphql
query {
  user(id: "123") {
    name
    email
    posts {
      title
      createdAt
    }
  }
}

graphql
query {
  users {
    name
    posts {
      title
      comments {
        text
        author {
          name
        }
      }
    }
  }
}

graphql
mutation {
  createUser(input: {
    name: "Иван Петров"
    email: "ivan@example.com"
  }) {
    id
    name
    email
  }
}

graphql
mutation {
  updatePost(id: "456", input: {
    title: "Новый заголовок"
    content: "Обновленное содержание"
  }) {
    id
    title
    content
    updatedAt
  }
}

graphql
subscription {
  newMessage(chatId: "789") {
    id
    text
    sender {
      name
    }
    timestamp
  }
}

graphql
query {
  posts(
    limit: 10
    offset: 0
    sort: { field: "createdAt", order: DESC }
    filter: { category: "технологии" }
  ) {
    id
    title
    content
  }
}

graphql
query GetUserPosts($userId: ID!, $postLimit: Int) {
  user(id: $userId) {
    name
    posts(limit: $postLimit) {
      title
      content
    }
  }
}

{
  "data": {
    "user": {
      "name": "Иван",
      "posts": null
    }
  },
  "errors": [
    {
      "message": "Ошибка при загрузке постов",
      "path": ["user", "posts"]
    }
  ]
}

graphql
query {
  currentUser: user(id: "123") {
    name
  }
  adminUser: user(id: "456") {
    name
  }
}

graphql
query($includeAddress: Boolean!) {
  user {
    name
    email
    address @include(if: $includeAddress) {
      street
      city
    }
  }
}

graphql
query {
  posts(first: 10, after: "cursor123") {
    edges {
      node {
        id
        title
      }
      cursor
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
import { createApp, h } from 'vue';
import { DefaultApolloClient } from '@vue/apollo-composable';
 
const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
});
 
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});
 
const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient);
  },
  render: () => h(App),
});

import { useQuery, useMutation } from '@vue/apollo-composable';
import { defineComponent } from 'vue';
 
export default defineComponent({
  setup() {
    const { result, loading, error } = useQuery(gql`
      query GetUsers {
        users {
          id
          name
          email
        }
      }
    `);
 
    return { users: result, loading, error };
  },
});

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { App } from './App';
 
const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});
 
function Root() {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

import { useQuery, useMutation } from '@apollo/client';
 
function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);
  const [updateUser] = useMutation(UPDATE_USER);
 
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
 
  return (
    <div>
      {data.users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

import { APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';
 
@NgModule({
  providers: [{
    provide: APOLLO_OPTIONS,
    useFactory: (httpLink: HttpLink) => {
      return {
        cache: new InMemoryCache(),
        link: httpLink.create({
          uri: 'http://localhost:4000/graphql',
        }),
      };
    },
    deps: [HttpLink],
  }],
})
export class GraphQLModule { }

import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
 
@Component({
  selector: 'app-users',
  template: `
    <div *ngIf="loading">Loading...</div>
    <div *ngIf="error">Error: {{error.message}}</div>
    <div *ngIf="users">
      <div *ngFor="let user of users">
        {{user.name}}
      </div>
    </div>
  `
})
export class UsersComponent implements OnInit {
  constructor(private apollo: Apollo) {}
 
  ngOnInit() {
    this.apollo.watchQuery({
      query: GET_USERS
    }).valueChanges.subscribe(result => {
      this.users = result.data?.users;
    });
  }
}

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.error(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      );
    });
  }
  if (networkError) {
    console.error(`[Network error]: ${networkError}`);
  }
});

const client = new ApolloClient({
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          posts: {
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            }
          }
        }
      }
    }
  })
});

const client = new ApolloClient({
  cache: new InMemoryCache({
    fields: {
      posts: {
        read(existing, { args }) {
          return existing?.slice(args.offset, args.offset + args.limit);
        }
      }
    }
  })
});

const USER_FRAGMENT = gql`
  fragment UserDetails on User {
    id
    name
    email
    avatar
  }
`;
 
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      ...UserDetails
      posts {
        id
        title
      }
    }
  }
  ${USER_FRAGMENT}
`;

const preloadedQueries = {
  userProfile: {
    query: GET_USER_PROFILE,
    variables: { id: currentUserId }
  },
  recommendations: {
    query: GET_RECOMMENDATIONS,
    variables: { limit: 10 }
  }
};
 
const client = new ApolloClient({
  link: ApolloLink.from([
    new PreloadLink({ preloadedQueries }),
    httpLink
  ])
});

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        isOffline: {
          read() {
            return navigator.onLine === false;
          }
        }
      }
    }
  }
});
 
const client = new ApolloClient({
  cache,
  resolvers: {
    Mutation: {
      toggleOfflineMode: (_, variables, { cache }) => {
        const data = {
          isOffline: !cache.readQuery({ query: GET_OFFLINE_STATUS })
        };
        cache.writeData({ data });
        return null;
      }
    }
  }
});

const UPLOAD_FILE = gql`
  mutation UploadFile($file: Upload!) {
    uploadFile(file: $file) {
      url
      filename
      mimetype
    }
  }
`;
 
function FileUploader() {
  const [uploadFile] = useMutation(UPLOAD_FILE);
 
  const handleFileChange = async (event) => {
    const file = event.target.files[0];
    try {
      const { data } = await uploadFile({
        variables: { file },
        context: {
          hasUpload: true
        }
      });
      console.log('File uploaded:', data.uploadFile.url);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };
 
  return <input type="file" onChange={handleFileChange} />;
}

function useGraphQLQuery(query, options = {}) {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null
  });
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await client.query({
          query,
          ...options
        });
        setState({
          loading: false,
          error: null,
          data: result.data
        });
      } catch (error) {
        setState({
          loading: false,
          error,
          data: null
        });
      }
    };
 
    fetchData();
  }, [query, options]);
 
  return state;
}

const gateway = new ApolloGateway({
  serviceList: [
    { name: 'users', url: 'http://users-service/graphql' },
    { name: 'posts', url: 'http://posts-service/graphql' },
    { name: 'comments', url: 'http://comments-service/graphql' }
  ],
  buildService({ name, url }) {
    return new RemoteGraphQLDataSource({
      url,
      willSendRequest({ request, context }) {
        request.http.headers.set(
          'authorization',
          context.authToken
        );
      }
    });
  }
});