How to Use Supabase with GraphQL

1-- Enable the pg_graphql extension
2create extension if not exists pg_graphql;
3
4-- Verify it is installed
5select * from pg_extension where extname = 'pg_graphql';

1// Query using fetch
2const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!
3const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
4
5const response = await fetch(`${SUPABASE_URL}/graphql/v1`, {
6  method: 'POST',
7  headers: {
8    'Content-Type': 'application/json',
9    'apikey': SUPABASE_ANON_KEY,
10    'Authorization': `Bearer ${SUPABASE_ANON_KEY}`
11  },
12  body: JSON.stringify({
13    query: `
14      query GetTodos {
15        todosCollection {
16          edges {
17            node {
18              id
19              task
20              is_complete
21              created_at
22            }
23          }
24        }
25      }
26    `
27  })
28})
29
30const { data } = await response.json()
31console.log(data.todosCollection.edges)

1// Insert a new todo
2const insertQuery = `
3  mutation InsertTodo {
4    insertIntotodosCollection(objects: [{
5      task: "Learn GraphQL with Supabase"
6      is_complete: false
7    }]) {
8      records {
9        id
10        task
11        is_complete
12      }
13    }
14  }
15`
16
17// Update a todo
18const updateQuery = `
19  mutation UpdateTodo {
20    updatetodosCollection(
21      filter: { id: { eq: 1 } }
22      set: { is_complete: true }
23    ) {
24      records {
25        id
26        task
27        is_complete
28      }
29    }
30  }
31`
32
33// Delete a todo
34const deleteQuery = `
35  mutation DeleteTodo {
36    deleteFromtodosCollection(
37      filter: { id: { eq: 1 } }
38    ) {
39      records {
40        id
41      }
42    }
43  }
44`

1import { ApolloClient, InMemoryCache, HttpLink, ApolloProvider } from '@apollo/client'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7)
8
9const httpLink = new HttpLink({
10  uri: `${process.env.NEXT_PUBLIC_SUPABASE_URL}/graphql/v1`,
11  headers: {
12    apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
13  },
14  fetch: async (uri, options) => {
15    const { data: { session } } = await supabase.auth.getSession()
16    const headers = options?.headers as Record<string, string> || {}
17    if (session?.access_token) {
18      headers['Authorization'] = `Bearer ${session.access_token}`
19    } else {
20      headers['Authorization'] = `Bearer ${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}`
21    }
22    return fetch(uri, { ...options, headers })
23  }
24})
25
26const apolloClient = new ApolloClient({
27  link: httpLink,
28  cache: new InMemoryCache()
29})

1const filteredQuery = `
2  query FilteredTodos($cursor: Cursor) {
3    todosCollection(
4      filter: { is_complete: { eq: false } }
5      orderBy: [{ created_at: DescNullsLast }]
6      first: 10
7      after: $cursor
8    ) {
9      edges {
10        node {
11          id
12          task
13          created_at
14        }
15        cursor
16      }
17      pageInfo {
18        hasNextPage
19        endCursor
20      }
21    }
22  }
23`