Twitter-clone(react,apollo,graphql,typescript) (1~3)

🔧 setting

From prisma-example, copy graphql-auth
Rename graphql-auth to server and operate npm i
In twitter-clone folder operate create-react-app web --template typescript

➰ Connencting Prisma with PostgresQL

1. Modify datasource db in schema.prisma

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

2. Make.env file in prisma folder

DATABASE_URL="postgresql://postgres(owner):@localhost:5432/twitter-clone(db name)"
In server operate npx prisma generate

3. npx prisma migrate dev --preview-feature

💥At first I got error
Error: P1001: Can't reach database server at localhost:5432
But after I operatenpx prisma migrate reset --preview-feature,
everything works correctly

➰ Connectin front-end with back-end

1.npm install @apollo/client

2. Create 📁web ➡ 📁src ➡ 📃Users.tsx

import {gql, useQuery} from '@apollo/client'

const USERS_QUERY = gql`
    query USERS_QUERY {
        users {
            id
            name
        }
    }
`

interface User {
    name: string
}

const Users = () => {
    const{loading, error, data} = useQuery(USERS_QUERY)
    if(loading) return <p>Loading...</p>
    if(error) return <p>{error.message}</p>
    return(
        <div>
            {data?.users?.map((user : User) => <p>{user.name}</p>)}
        </div>
    );
}

export default Users;

3. Modify 📁server ➡ 📁src ➡ 📁types ➡ 📃Query.ts

import{...queryType...} from 'nexus'
...
...
    t.list.field('feed', {
      type: 'Post',
      resolve: (parent, args, ctx) => {
        return ctx.prisma.post.findMany({
         where: { published: true },
        })
      },
    })
...
...

		   🔽🔽🔽

import{...queryType...} from 'nexus'
...
...
    t.list.field('users', {
      type: 'User',
      resolve: (parent, args, ctx) => {
        return ctx.prisma.user.findMany()
      },
    })
...
...

4. Modify 📁web ➡ 📁src ➡ 📁components ➡ 📃App.tsx

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import Users from './components/Users';

const client = new ApolloClient({
  uri:"http://localhost:4000",
  cache: new InMemoryCache()
})

function App() {
  return (
    <ApolloProvider client={client}>
      <div><Users /></div>
    </ApolloProvider>
  );
}

export default App;

➰ Operating Mutation

---

1. DOC of signup mutation

2. Muatation query

🎯SCHEMA

directive @specifiedBy(url: String!) on SCALAR
type AuthPayload {
  token: String
  user: User
}

type Mutation {
  signup(name: String, email: String!, password: String!): AuthPayload
  login(email: String!, password: String!): AuthPayload
  createDraft(title: String!, content: String): Post
  deletePost(id: Int!): Post
  publish(id: Int!): Post
}

type Post {
  id: Int!
  published: Boolean!
  title: String!
  content: String
  author: User
}

type Query {
  me: User
  users: [User]
  filterPosts(searchString: String): [Post]
  post(id: Int): Post
}

type User {
  id: Int!
  name: String
  email: String!
  posts: [Post!]!
}