Error: Unauthorized: {"response":{"data":null,"errors":[{"message":"Unauthorized"}],"status":200

[arifali2001]

Error: Unauthorized: {"response":{"data":null,"errors":[{"message":"Unauthorized"}],"status":200,"headers":{"map":{"access-control-allow-origin":"","access-control-expose-headers":"","content-length":"51","content-type":"application/json;charset=UTF-8","date":"Tue, 24 Oct 2023 03:56:14 GMT","vary":"origin, access-control-request-method, access-control-request-headers"}}},"request":{"query":"\n\tmutation CreateProject($input: ProjectCreateInput!) {\n\t\tprojectCreate(input: $input) {\n\t\t\tproject {\n\t\t\t\tid\n\t\t\t\ttitle\n\t\t\t\tdescription\n\n\n\t\t\t\tcreatedBy {\n\t\t\t\t\temail\n\t\t\t\t\tname\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n","variables":{"input":{"title":"qe","description":"eq","image":"http://res.cloudinary.com/depfldi7y/image/upload/v1698119773/q6aweuk8o2ryfxwgqvs1.png","components":"qe","liveSiteUrl":"https://goggle.com","githubUrl":"https://goggle.com","category":"Computer-Sci","createdBy":{"link":"user_01HD8R63T1D69XBD50FX5PAV33"}}}}} at makeRequest (webpack-internal:///(app-pages-browser)/./node_modules/graphql-request/build/esm/index.js:301:15) at async makeGraphQLRequest (webpack-internal:///(app-pages-browser)/./lib/actions.ts:22:16) at async handleFormSubmit (webpack-internal:///(app-pages-browser)/./components/ProjectForm.tsx:35:17)

I check everything but still i dont know why I'm getting this. There is no data in grafbase

[EjDadivas]

I had similar error but found the solution from #20

You need to pass headers on the GraphQLClient and makeGraphQLRequest

lib/actions.tsx

const clientOptions = {
  headers: {
    "x-api-key": apiKey,
  },
};

const client = new GraphQLClient(apiUrl, clientOptions);

const makeGraphQLRequest = async (
  query: string,
  variables = {},
  headers = {}
) => {
  try {
    return await client.request(query, variables, headers);
  } catch (error) {
    throw error;
  }
};

createNewProject

export const createNewProject = async (
  form: ProjectForm,
  creatorId: string,
  token: string
) => {
  // upload image to  cloudinary
  const imageUrl = await uploadImage(form.image);

  if (imageUrl.url) {
    const headers = { Authorization: `Bearer ${token}` };
    const variables = {
      input: {
        ...form,
        image: imageUrl.url,
        createdBy: {
          link: creatorId,
        },
      },
    };
    return makeGraphQLRequest(createProjectMutation, variables, headers);
  }
};

[arifali2001]

Oo. Thank you very much friend. Lemme try this.

[EjDadivas]

I hope it helps! :>

[Amir-Kermanshahani]

I hope it helps! :>

Thanks a lot for mentioning the answer, It solved my problem.

[arifali2001]

Looks like I got a new issue. The grafbase database is deprecated. I need to use the MongoDB connector. MongoDB Atlas actually. So can you help me out. I'm trying but, no signs of Connection. Please give a try, may be it will be easy for you guys. I'm kinda new in this thing