It used to be vue2, Recently, new projects have used vue3, It's recorded here vue3 In the environment , Use GraphQL Some of the experience . If you're using vue2, Recommended direct use vue-apollo Components .

1. Front end development use GraphQL—— Server technology selection

2. Front end development use GraphQL——Nestjs/GraphQL Project structures,

background

The new project adopts vue3 Development , Now, vue Corresponding QraphQL modular vue-apollo To use typescript Developed vue3 Framework support is not very good ( Currently under development Vue Apollo 4 Will support Vue 3), Can't use typescript To check GraphQL Data pulled back by the interface , Here's how to deal with these problems .

One 、 establish apollo example

Create a apollo Example , Here you can customize your apollo example , For now, let's create the simplest instance .

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

//  And  API  Of  HTTP  Connect 
const httpLink = createHttpLink({
  //  You need to use absolute paths here 
  uri: 'http://localhost:3000/graphql',
})

//  Cache implementation 
const cache = new InMemoryCache()

//  establish  apollo  client 
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

export default apolloClient;

Two 、 install graphql-codegen

graphql-codegen According to GraphQL Of the agreement , Generate typescript Of type. We can use these later type Go check GraphQL What the interface returns .

//  install graphql-codegen
npm i graphql-codegen --save--dev
// package.json  Inside script  add to 
"scripts": {
   "dev": "vite --port 3333",
   "generate": "graphql-codegen --config ./src/codegen.yml"
},
// add to codegen.yml file 
schema: http://127.0.0.1:3000/graphql
generates:
  ./src/types/graphql/types.d.ts:
    plugins:
      - typescript

perform npm run generate after , Will generate GraphQL Data typescript Type file , Similar to the following

export type Maybe<T> = T | null;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
};

export type Feed = {
  __typename?: 'Feed';
  content: Scalars['String'];
  id: Scalars['Int'];
  title: Scalars['String'];
};

export type Query = {
  __typename?: 'Query';
  feed: Feed;
};

export type QueryFeedArgs = {
  id: Scalars['Float'];
};

3、 ... and 、 Write call GraphQL Function of

Write calling functions , Introduce the type generated in the previous step , So we can use it typescript The type check checks our data , Recommended here webstorm and vscode Students to install the corresponding expansion , Can do intelligent prompt . Parameters here

import client from '../apollo'
import gql from 'graphql-tag';
import { Feed } from "../types/graphql/types";

type resFeed = {
  data: {
    feed: Feed;
  };
};

export function getFeedById(id: number): Promise<resFeed> {
  return client.query({
    query: gql`
      query feed($id: Float!) {
        feed(id: $id) {
          id
          title
          content
        }
      }`,
    variables: {
      id
    },
  });
}

Four 、 Summary

Come here , We can achieve in vue3 It calls GraphQL Service for , At the same time, the returned data is used typescript Do a type check , No more writing typescript Data type of .

Code can refer to my github: xyc-cn/nestjs-graphql-demo at vue3-apollo (github.com)