Prisma, update scalarList/array

2022-05-04 10:15 Simon imported from Stackoverflow

I´m doing an Spotify clone and I´m trying to add a song to a playlist but my query doesn't work, to finish this clone only need to add a song to a playlist and delete a song from a playlist, until this point, everything was good following the documentation on prisma docs, but I cannot do this query, every time get an error, so if someone can tell how can I do this with an example, I'll be very grateful.

This is my first question here so don't kill me and thanks!

My schema:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}

model User {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
  email     String    @unique
  firstName String
  lastName  String
  password  String
  playlists Playlist[]
}

// add a Song to a playlist, here?
model Song {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
  name      String
  artist    Artist    @relation(fields: [artistId], references: [id])
  artistId  Int
  playlists Playlist[]
  duration  Int
  url       String
}

model Artist {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
  songs     Song[]
  name      String    @unique
}

// or here? or both?
model Playlist {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
  name      String
  songs     Song[]
  user      User      @relation(fields: [userId], references: [id])
  userId    Int
}

And here is my query:

lists = await prisma.song.findFirst({
            select: {
                playlists: true
            },
            where: {
                id: +songId
            }
        })

        const list = await prisma.playlist.findUnique({
            where: {
                id: playlistId
            }
        })

        lists = [ ...lists.playlists, list ]


        await prisma.song.update({
            where: { id: +songId },
            data:{
                playlists: lists

            }
          })

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.
react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
```
 <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
```
but it not work in v6.

How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

This my .env file

REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
REACT_APP_authDomain=XXXXX.firebaseapp.com
REACT_APP_projectId=XXXX
REACT_APP_storageBucket=XXXXX.appspot.com
REACT_APP_messagingSenderId=4997390XXXXX
REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
REACT_APP_measurementId=G-M1XDXXXXXX

This my firebase config file

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

when I debugging firebaseConfig object

console.log(firebaseConfig.apiKey);  ==========> undefined 
console.log(firebaseConfig.authDomain);  ==========> undefined 
console.log(firebaseConfig.projectId);  ==========> undefined 
console.log(firebaseConfig.storageBucket); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined 
console.log(firebaseConfig.appId); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined

client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"

Apollo `useMutation()` stuck loading inside Next.js component

The following form component in Next.js submits without errors but never completes the mutation. Instead it get's stuck in the loading state.

import React, { useState } from "react";
import { gql, useMutation } from "@apollo/client";
import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  ssrMode: true,
  uri: process.env.API_URL,
  cache: new InMemoryCache(),
});

const CREATE_COMMENT = gql`
  mutation CreateComment(
    $username: String!
    $comment: String!
  ) {
    createComment(
      data: { username: $username, comment: $comment }
    ) {
      id
      username
      comment
    }
  }
`;

export default function SocialForm() {
  const [commentName, updateCommentName] = useState("");
  const [commentDescription, updateCommentDescription] = useState("");
  const [createComment, { data, error, loading }] = useMutation(
    CREATE_COMMENT,
    { client }
  );

  const handleFormSubmit = async () => {
    await createComment({
      variables: {
        name: commentName,
        comment: commentDescription
      },
    });
  };

  if (loading) return "loading...";
  if (error) return <p>error text :(</p>;
  return (
    <>
      <form
        onSubmit={async (e) => {
          e.preventDefault();
          await handleFormSubmit();
        }}
        className="social-form"
      >
        <input
          required
          onChange={(e) => updateCommentName(e.target.value)}
          type="text"
          placeholder="Full Name"
          className=""
        />
        <textarea
          required
          maxLength="280"
          onChange={(e) => updateCommentDescription(e.target.value)}
          className="w-full"
          name="comment"
          rows="5"
          placeholder="Leave your thoughts and images at the moment"
        />
      </form>
    </>
  );
}

Also the server side mutation with this exact same schema runs correctly inside Apollo playground and I'm using Keystone.js to auto generate the schema.

NextJS: Error serializing `.data.data` returned from `getServerSideProps`

I'm new to NextJS. I'm working on a simple page in which I need to retrieve data from my backend app. My backend app is a totally separate app written in go. My undestanding is that I must use getServerSideProps to get data from the server on load, so I've got the following:

myProject/pages/category/new.js:

export default function AddNewCategory(data) {
...
}

export const getServerSideProps = async () => {
    const data = await getAllCategories();
    console.log(await data)
    return {
        props: {
            data: { data }
        }
    };
};

myProject/api/category.js:

import axios from "axios";

// getAllCategories returns a list of all active categories
export const getAllCategories = async() => {

    axios.get("http://127.0.0.1:8080/api/v1/categories")
        .then(function (response) {
            console.log(response.data)
            return response.data;
        })
        .catch(error => {
            console.error("error")
            console.log(error)
        })

}

As you can see I've got a print statement in getAllCategories which prints:

{
  data: [
    {
      id: 1,
      name: 'Pop',
      slug: 'pop',
      description: 'Pop',
      parent: 0,
      active: true,
      created_at: '2022-05-03T19:50:00-04:00',
      updated_at: '2022-05-03T19:50:00-04:00',
      deleted_at: null
    },
    {
      id: 3,
      name: 'Pop 2',
      slug: 'pop-2',
      description: 'Pop',
      parent: 0,
      active: true,
      created_at: '2022-05-03T19:50:24-04:00',
      updated_at: '2022-05-03T19:50:24-04:00',
      deleted_at: null
    }
  ]
}

yet I'm getting the following error:

error - Error: Error serializing .data.data returned from getServerSideProps in "/category/new". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

I saw around that I should try to convert the data to string and then back to json:

return { 
  props: { 
    data: JSON.parse(JSON.stringify(data)) 
  } 
};

but when I do this I'm getting a different error:

error - SyntaxError: Unexpected token u in JSON at position 0

I'm using next@12.1.5

Any idea what's going on?

I am having problem in development mode with NextJS but it works perfect on production. Warning: Prop `className` did not match. Server

enter image description here

This is the problem I am using A React framework & component library for building web user interfaces at Volvo Cars and the engine for this css-in-js. Please check the photo. Thank you!
Prisma: make boolean so only one can be true at the same time

Is it possible to make a boolean "unique" in Prisma? I want only one row to be 'true' at the same time. @Unique doesn't work because there can be multiple 'false'.

I know there are better options to keep track of whether someone is logged in, but according to the assignment I MUST do it this way....

Screenshot of Database

Thanks in advance.

next auth coinbase provider using prisma adapter doesn't add Account error created_at in data.created_at for type AccountUncheckedCreateInput

Seems like one data object in AccountUncheckedCreateInput is missing: data.created_at

Invalid p.account.create() invocation in

16 },
17 updateUser: ({ id, ...data }) => p.user.update({ where: { id }, data }),
18 deleteUser: (id) => p.user.delete({ where: { id } }),
→ 19 linkAccount: (data) => p.account.create({
data: {
xxx
}
})

Unknown arg created_at in data.created_at for type AccountUncheckedCreateInput. Available args:

type AccountUncheckedCreateInput {
id?: String
userId: String
type: String
provider: String
providerAccountId: String
refresh_token?: String | Null
access_token?: String | Null
expires_at?: Int | Null
token_type?: String | Null
scope?: String | Null
id_token?: String | Null
session_state?: String | Null
}

How to configure NextJS Server API GraphQL Subscription

currently i'm learning how to develop an application using graphql. I'm facing the error of implementing the subscription inside my application

resolver.js

const pubsub = new PubSub()
export const resolvers = {

  Mutation: {
    createCategory:async(parent,arg,{pubsub}) => {
      console.log(pubsub)
        const prisma = new PrismaClient();
        const {name} = arg

        await prisma.category.create({
            data:{
                name:name,
                author:{
                    connect:{
                        id: "vjuwU0KvWhVDehB1gPgJ7TFRwcy1"
                    }
                }
            }
        });

      pubsub.publish('NEW_CATEGORY',{
        newCategory:{
          id:"1"
        }
      })

        return true;
    }
  },
  Subscription:{
      category:{
          subscribe: (_,__,)=>pubsub.asyncIterator(['NEW_CATEGORY']),
      }
  }
};

api/graphql.js

const pubsub = new PubSub()

const apolloServer = new ApolloServer({ typeDefs, resolvers,context:({req,res})=>({req,res,pubsub})});

const startServer = apolloServer.start();

export default cors(async function handler(req, res) {
  if (req.method === "OPTIONS") {
    res.end();
    return false;
  }
  await startServer;

  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
});

export const config = {
  api: {
    bodyParser: false,
  },
};

Error were occurred, i was unable to solve it due to this error message

error - image

Related questions

Prisma, update scalarList/array

See also questions close to this topic