Gridsome, github, netlify, 8base

1

hey!
I am trying to build a blog with gridsome. I deploy it with Netllify which builds when I push to github.
good, so that works.
now I am trying to connect it to 8Base, which I managed to do, and I am displaying mock data that I inserted in the 8base dashboard.

I want the build command to create pages from every blogpost that I have in a “texts” table in 8base.
I know how to do this in gridsome - in the gridsome.server.js file. but i need to trigger it somehow.
I want to design a page formyself, in my website, where I write posts and save them to 8base, which should then trigger a rebuild on the repo, or in netllify. who does the triggering? 8base? github? netlify? this I do not understand.

how would I create a page in my website that can insert data into 8base?
any thoughts?

thanks
joe

2

Hello!

I’ve got you. We’ll give you a response soon.

Lada Kokotova | Technical Support Engineer

3

thanks Lada!
I apreciate it. :].
I started reading about Netlify forms, and also thinking about Axios, Apollo maybe? I am not sure how these things would integrate. but i understand that simple GraphQL mutations are not possible in a static website.
hope to hear from you soon, thanks

4

ok since writing this Iv been researching Netlify functions, I think I can build a simple backend for my static website that loads data to 8base. but i need to figure out the Lambda thing and the authentication process. I would still need Apollo, right? any advise?

5

Hello!

I need some additional information from you. What exactly do you want to know about Lambdas and Apollo? This specific question will help me give you a full response.

What I can offer you at this stage:

Lada Kokotova | Technical Support Engineer

7

should this work as an apollo mutation to sign up a user?

export const actions = {
  async USER_SIGNUP({ commit }, creds) {
    const apollo = this.app.apolloProvider.defaultClient;

try {
  var res = await apollo.mutate({
    mutation: USER_SIGNUP,
    variables: {
      email: creds.email,
      password: creds.password,
      authProfileId: process.env.AUTH_PROFILE_ID,
      authClientId : process.env.AUTH_CLIENT_ID,
      authDomain : process.env.BASE_DOMAIN
    }
  });
} catch (e) {
  console.log("Sign up error", e);
  throw e;
  return false;
}

return res.data;

},

apollo is set up like this :

export default function() {
  return {
    httpEndpoint: process.env.BASE_ENDPOINT,
    httpLinkOptions: {
        headers:{
            Authorization: `Bearer ${process.env.EIGHTBASE_API_TOKEN}`,
        }
    }
  };
}

and the query looks like this :

mutation UserSignup($password: String!, $email: String!, $authProfileId: ID!,$authClientId: String!, $authDomain: String!) {
  __typename
  userSignUpWithPassword(
    password: $password
    user: { email: $email }
    authProfileId: $authProfileId
    clientId: $authClientId
    domain: $authDomain
  ) {
    id
    email
  }
}
8

Hello!

if you turn off the selfsignup option no one will be able to use userSignUpwithpassword mutation.
UserSignUpwithpassword mutation will not be available completely. The only way is to use the specific email domain option.

Lada Kokotova | Technical Support Engineer

9

I made another profile and put it on open, so it should work. I think the problem is that I am trying to signup a new user while also being logged into 8base in another tab. so i tried on incognito but i get this : The limit is reached for metric ‘appUsers8base’.

maybe this is because I am trying many times…

my mutation looks like this now :

mutation UserSignup($password: String!, $email: String!, $authProfileId: ID!) {
  __typename
  userSignUpWithPassword(
    password: $password
    user: { 
        email: $email
    }
    authProfileId: $authProfileId
  ) {
    id
    email
  }
}

apollo config

export default function() {
  return {
    httpEndpoint: process.env.BASE_ENDPOINT
  };
}

action

// Define actions
export const actions = {
  async USER_SIGNUP({ commit }, creds) {
    const apollo = this.app.apolloProvider.defaultClient;

    try {
      var res = await apollo.mutate({
        mutation: USER_SIGNUP,
        variables: {
          email: creds.email,
          password: creds.password,
          authProfileId: process.env.AUTH_PROFILE_ID,
        }
      });
    } catch (e) {
      console.log("Sign up error", e);
      throw e;
      return false;
    }

    return res.data;
  },

i must be doing something wrong…

10

I am missing something very simple, I just want my own user (me) to be able to login from the frontend. isnt this possbile somehow without creating a fake user?

11

@JoeBat What type of auth do you use? Can you provide your workspaceId please?

12

is it safe to share workspaceId here?

I am using auth of 8base. i made one profile open and another closed. I am just trying to figure out how to login for myself from the front.

I think I am misunderstanding how to configure Apollo.

the name of my workspace is ’ supersubjective ’

13

Yeah, it’s pretty much safe, I guess, but the name is fine too, thanks.
So, you have reached the users limit for the default 8base auth profile (it is 5 for the free plan).
Your implementation is alright as I see from my quick review. Just clear Users’ table records and try to sign up again.

14

in my console there are no users.

image
image.png1404×391 16.2 KB

image
image.png1453×582 14.8 KB

15

Oh, I get it.
Please destroy all of your records using userDestroyByFilter mutation.
Here is the little info on the subject https://docs.8base.com/docs/8base-console/graphql-api/mutations/#delete-vs-destroy

16

but i didnt delete them using a mutation, I can bearly get that thing to work. i dont understand. so now…can i send this mutation from within 8base explorer?

Im sorry i dont have the ability to do this. I dont understand. where are these users?

17

i cannot even query them

image
image.png943×227 8.6 KB

how would i filter the destroy mutation?
is there an sdk/docs details of how to use userDestroyByFilter mutation?

something like this?
image

18

I linked the explanation earlier:
https://docs.8base.com/docs/8base-console/graphql-api/mutations/#delete-vs-destroy
There are soft and hard delete in 8base. You execute soft one when deleting records from data builder interface. Deleted records are still in DB till they are hard deleted. You can use withDeleted: true argument to see soft deleted records:
image

19

I understand the explanation in the docs. but i dont understand from where I send the destroy mutation. and how to filter, i havent learnd that part of graphql yet. do i need to write a function with the mutation in my frontend that destroys the users just so I can start over? or can I send the destroy mutation from the graphql explorer inside 8base?

how should I filter them?

20

Ok.
You can use our API Explorer straight from your workspace (in fact you can use any client for sending POST request to your API like curl, Postman etc).
Here is the step-by-step guide:

  1. You get the ids of users, executing usersList mutation
    image
    image.png1203×542 31.8 KB
  2. Execute userDestroyByFilter mutation passing the ids of these records or using other predicate like is_not_empty - it will destroy all the records which ids are not null
    image
21

You can use auto-generated documentation for your API or Explorer feature to learn more about available queries/mutations and build it with the right syntax.

image
image.png1715×938 122 KB