GraphQL Job Board;

How to use React Query with React and GraphQL;

https://www.takeshape.io/articles/how-to-use-react-query-with-react-and-graphql/;

Folder/Schema Structure with GraphQL;

https://javascript.plainenglish.io/writing-a-node-js-graphql-backend-that-actually-scales-a-complete-guide-part-1-setup-cddceae25bdc;

JWT.IO allows you to decode, verify and generate JWT;

https://jwt.io/

additional packages CLIENT:

• graphql-request;
• graphql;
• @apollo/client;

====================================================================================

### UDEMY: https://www.udemy.com/course/graphql-by-example/learn/lecture/31846806#overview
### UDEMY: https://www.udemy.com/course/nodejs-the-complete-guide/learn/lecture/12197882#overview

====================================================================================

Type Definitions (Query, Mutation, Subscription);

#### they are call `resolvers`:

    -   Query => get;
    -   Mutation => post, put, patch, delete;
    -   Subscription => for Websockets;
    -   {} => the same as Query';

#### `GraphQL endpoint: http://localhost:${PORT}/graphql`);

#### `Definitions` => like Routes;
#### `Resolvers` => like Controllers;

==================================================================================== ID! => means Mandatory => shouldn't be a null; ID => means Optional => should be a null; jobs: [Job!] => means each element in the array can not be null => each element should be object || empty array;

[Definitions]

    type Query {
        jobs: [Job!]
    }

    type Job {
        id: ID!
        title: String!
        description: String
    }
     type Mutation {
        createJob(input: CreateJobInputType!): Job
    }

    input CreateJobInputType {
        title: String!
        companyId: ID!
        description: String
    }

[Resolvers] context - contains additional resolvers properties;

    export const resolvers = {
        Query: {
            jobs: () => [],
        },
        Mutation: {
            createJob: (_root, { input }) => {
                return Job.create(input);
            },
        },
    };

[Postman POST call]

    query {
        jobs {
            id,
            title,
            description
        }
    }

[Postman POST call with params(variables)]

query JobQuery($id: ID!){
    job(id:$id) {
        id,
        title,
        description,
        company{
            id,
            name
        }
    }
}

mutation CreateJobMutation($input:CreateJobInputType!){
    job: createJob(input:$input) {
        id
        title
        company {
            id
            name
        }
    }
}

[Request Authentication]

const HEADERS = { Authorization: `Bearer ${getAccessToken()}` };
const { errors, job } = await request(GRAPHQL_URL, query, variables, HEADERS);

APOLLO

[Queries]

```
1.
    *** [`INSTANCE`] ***

    const `client` = new ApolloClient({
        uri: GRAPHQL_URL,
        cache: new InMemoryCache(),
    });

2.
    async function getJobs() {
        const query = gql`
            query {
                jobs {
                    id
                    title
                    description
                        company {
                            name
                        }
                }
            }
        `;
        const { data: { jobs } } = await `client`.query({ query: query });
        return jobs;
    }
```

[Postman (__typename)]

- unique key to identify each object in the cache;

```
    1. `request`
            query JobsQuery {
                jobs {
                    id,
                    title,
                    description,
                    company {
                        id,
                        name,
                    }
                    __typename
                }
                 __typename
            }
    2. `response`
            "data": {
                "jobs": [
                    {
                        "id": "soP9m8MdKeQX_ZXZOCSaL",
                        "title": "Frontend Developer",
                        "description": "We are looking for a Frontend Developer familiar with React.",
                        "company": {
                            "id": "pVbRRBQtMVw6lUAkj1k43",
                            "name": "Facegle"
                        },
                        "__typename": "Job"
                    },
                    "__typename": "Query"
                    ...
                ]
            }
        }

```

[CACHE]

- Apollo caches all query results by default;

[fetchPolicy]

```
    const {
        data: { jobs },
    } = await client.query({ query: query, fetchPolicy: 'no-cache' });
```

- fetchPolicy:
    - `fetch-first` - default;
    - ...;
    - `network-only` - similar to `no-cache`;
    - `no-cache`;

[fetchPolicy,defaultOptions, INSTANCE]

-   `query`;
-   `mutate`;
-   `watchQuery` - needs for React, like a `observer` => should handle any changes;

```
    const `client` = new ApolloClient({
        uri: GRAPHQL_URL,
        cache: new InMemoryCache(),
        defaultOptions: {
            query: {
                fetchPolicy: `network-only`
            },
            mutate: {
                fetchPolicy: `network-only`,
            },
            watchQuery: {
                fetchPolicy: `network-only`,
            },
        }
    });
```

[CACHE update after the request]

- writeQuery => cache.writeQuery;

```
    const {
        data: { job },
        errors,
    } = await client.mutate({
        mutation,
        variables,
        context,
        // this function called after the mutation;
        update: (cache, result) => {
            const {
                data: { job },
            } = result;
            cache.writeQuery({
                query: JOB_QUERY,
                variables: { id: job.id },
                data: { job },
            });
        },
    });
```

[fragment]

```
    1.
        query JobQuery($id: ID!) {
            job(id: $id) {
                ...JobDetail
            }
            __typename
        }

        fragment JobDetail on Job {
                id
                title
                description
                company {
                    id
                    name
                }
                __typename
        }

    2.
        const JOB_DETAIL_FRAGMENT = gql`
        fragment JobDetail on Job {
            id
            title
            description
            company {
                id
                name
            }
            __typename
        }
    `;

    const JOB_QUERY = gql`
        query JobQuery($id: ID!) {
            job(id: $id) {
                ...JobDetail
            }
            __typename
        }
        ${JOB_DETAIL_FRAGMENT}
    `;

```

[CLIENT]

• ApolloProvider => root app file;
• useQuery => like on react-query;
  • jetJobs() replaced to => const { data: { jobs = [] } = {}, loading, error } = useQuery(JOBS_QUERY, { fetchPolicy: network-only });