graphql question

gistfile1.txt

// client
const GET_RECORDINGS = gql`{
  recordings {
    id
    title
    input
  }
}`
const ADD_RECORDINGS = gql`
  mutation($title: String!, $input: AudioInput! ) {
    addRecording(title: $title, input: $input) {
        title
        input
    }
  }
`;

        <Mutation mutation={ADD_RECORDINGS} variables={{ title: 'testing mutation recordign title1', input: [{midiNumber: 1, currentTime: 1}] }}>
          {(addRecording) => (
            <button
              className={'RepositoryItem-title-action'}
              onClick={addRecording}
            >
              Record
            </button>
          )}
        </Mutation>


        <Query query={GET_RECORDINGS}>
          {({ data, loading }) => {
            // const { viewer } = data;
            console.log("===GET_RECORDINGS QUERY RESULT data", data)
            // if (loading || !viewer) {
            //   return <div>Loading ...</div>;
            // }
            if (loading) {
              return <div>Loading ...</div>;
            }
            return (
              <div>
                get_recordings_result query
              </div>
            );
          }}
        </Query>




// server
const { ApolloServer, gql } = require('apollo-server');

const recordings = [
    {
        id: 1,
        title: 'Recording 1 graphql example',
        input: [ {midiNumber: 51, currentTime: 1}, {midiNumber: 52, currentTime: 2}, {midiNumber: 53, currentTime: 3}],
    }
];

const typeDefs = gql`
    type Recording {
        id: ID!
        title: String
        input: [AudioOutput]
    }
    input AudioOutput {
      midiNumber: Float
      currentTime: Float
    }
    input AudioInput {
      midiNumber: Float
      currentTime: Float
    }

    type Query {
        recordings: [Recording]
    }

    type Mutation {
        addRecording(title: String, input: [AudioInput]): Recording
    }
`

const resolvers = {
    Query: {
        recordings: () => recordings,
    },
    Mutation: {
        addRecording: (_, { title, input }) => {
            const newRecording = {
                id: recordings.length + 1,
                title,
                input,
            };
            recordings.push(newRecording);

            return newRecording;
        }
    }
}

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
    console.log(`Apollo server running: ${url}`);
});