Skip to content

Interacting with the API

The starter kit comes pre-configured with a local authentication flow (email/password login) and a sample todo data model to get you started.

We'll be using well established http client libraries to interact with the api. The world (your code) does not need yet another dependency that just wraps a http client and has very little advantage to offer (often none).

Now that we have our project running, let's see what it provides and try and interact with it a bit.

Unauthenticated requests (Read)

First let's make an unauthenticated request and read the public todos.

Note

All the api clients in these examples (curl, fetch, axios) are interacting with the REST endpoint except for apollo client which interacts with the GraphQL endpoint. While it's possible to interact with the GraphQL endpoint with any http client, in practice you'd usually go for a library (like apollo client) specifically designed to interact with GraphQL. If you want to follow along and try out these examples and see the output, the easiest way would be to use the curl examples since all you need to do is copy and paste those lines in your terminal.

curl http://localhost:8080/rest/todos?select=id,todo
const endpoint = 'http://localhost:8080';
const response = await fetch(endpoint + '/rest/todos?select=id,todo');
console.log(response.json());
import axios from 'axios';
const client = axios.create({
    baseURL: 'http://localhost:8080'
    withCredentials: true
});
const response = await client.get('/rest/todos?select=id,todo');
console.log(response.data);
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
    uri: 'http://localhost:8080/graphql/simple',
    cache: new InMemoryCache()
});
const response = await client.query({ 
    query: gql`
        query {
            todos {
                id todo
            }
        }
    `
});
console.log(response);

Log in

Now let's try and make authenticated requests. The first thing we need to do is call the login function, which will create a SESSIONID cookie on the client.

curl -X POST --cookie-jar cookies.txt \
-d '{"email":"alice@email.com","password":"pass"}' \
http://localhost:8080/auth/login
await fetch(endpoint+'/auth/login', {
    method: 'POST',
    body: JSON.stringify({email:'alice@email.com',password:'pass'})
});
await client.post('/auth/login', {email:'alice@email.com',password:'pass'});
await client.query({ 
    query: gql` 
        mutation {
            login(email: "alice@email.com", password: "pass"){
                id 
            } 
        }
    `
});

Read (Authenticated request)

And now that we are logged in, we call the api again, but this time we send along our session cookie. Notice that the response will include additional private todos this time.

curl --cookie cookies.txt http://localhost:8080/rest/todos?select=id,todo
const response = await fetch(endpoint+'/rest/todos?select=id,todo', {
    credentials: 'same-origin'
});
console.log(response.json());
const response = await client.get('/rest/todos?select=id,todo');
console.log(response.data);
const response = await client.query({ 
    query: gql`
        query { 
            todos {
                id todo 
            } 
        }
    `
});
console.log(response);

Create

Since we are in the authenticated state, let's try and add a "todo"

Note

The following requests will add the new todo but we will not get back it's new id. To get back the newly inserted item, we need to send and additional header with our request called Prefer: return=representation

curl -X POST --cookie cookies.txt \
-d '{"todo":"new todo"}' \
http://localhost:8080/rest/todos
await fetch(endpoint+'/rest/todos', {
    method: 'POST',
    credentials: 'same-origin',
    body: JSON.stringify({todo:'new todo'})
});
client.post('/rest/todos', {todo:'New todo'});

GraphQL

const response = await client.query({ 
    query: gql`
        mutation {
            insert {
                todo(input: {todo: "new todo"}) {
                    id todo
                }
            }
        }
    `
});
console.log(response);

Update

We can also easily update a todo like so

curl -X PATCH --cookie cookies.txt \
-d '{"todo":"item_1 updated"}' \
http://localhost:8080/rest/todos?id=eq.1
await fetch(endpoint+'/rest/todos?id=eq.1', {
    method: 'PATCH',
    credentials: 'same-origin',
    body: JSON.stringify({todo:'item_1 updated'})
});
client.patch('/rest/todos?id=eq.1', {todo:'item_1 updated'});

GraphQL

const response = await client.query({ 
    query: gql`
        mutation {
            update {
                todo(id: 1, input: {todo: "item_1 updated"}) {
                    id todo
                }
            }
        }
    `
});
console.log(response);

Delete

And finally, let's delete and item, I bet you can already guess how the request will look like

curl -X DELETE --cookie cookies.txt \
http://localhost:8080/rest/todos?id=eq.1
await fetch(endpoint+'/rest/todos?id=eq.1', {
    method: 'DELETE',
    credentials: 'same-origin'
});

REST

client.delete('/rest/todos?id=eq.1');

GraphQL

const response = await client.query({ 
    query: gql`
        mutation {
            delete {
                todo(id: 1) {
                    id
                }
            }
        }
    `
});
console.log(response);