Data Access Project

(~2 minutes)

Initialize the data access project:

From the azure-quickstart directory open a command prompt or console and issue the following commands:

func init data-access --language typescript --worker-runtime node
cd data-access
func new --template "Http Trigger" --name graphql
npm i -D typescript
npm i apollo-server-azure-functions graphql@15 apollo-datasource-mongodb apollo-server-plugin-response-cache
npm install @types/node
npm i @graphql-tools/graphql-file-loader @graphql-tools/load @graphql-tools/schema graphql-scalars
npm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-resolvers
npm i -D @graphql-codegen/introspection @graphql-codegen/typed-document-node @graphql-codegen/typescript-operations
npm i @graphql-tools/load-files @graphql-tools/schema @graphql-tools/stitch @graphql-tools/json-file-loader
npm i graphql-fields graphql-middleware graphql-mongo-fields graphql-shield

npm i -D mongodb-memory-server

In VSCode choose File -> Add Folder to Workspace, choose data-access.

VS Code should recognize that this is an Azure Functions Project, and click "Yes" to the dialog.

Choose File -> Save Workspace As... change the file name to sharethrift.code-workspace and save in the serverless-quickstart directory.

edit the .vscode/launch.json file and change the port to 9230 as port 9090 is used by Dapr for metrics, and we don't want do have each developer modify their Dapr configuration.

azure-quickstart/data-access/.vscode/launch.json

{
 ...
 "configurations":[
   ...
   "port":9230,
   ...
 ]
 ...
}

edit ./tsconfig.json add the following to the compilerOptions settings:

azure-quickstart/data-access/tsconfig.json

"esModuleInterop": true,

Replace ./graphql/index.ts with:

azure-quickstart/data-access/graphql/index.ts

import { ApolloServer, gql }  from 'apollo-server-azure-functions';

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

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

exports.graphqlHandler = server.createHandler();

Replace ./graphql/function.json with:

azure-quickstart/data-access/graphql/function.json

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get", "post", "options", "put", "head", "delete", "patch"]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    }
  ],
  "scriptFile": "../dist/graphql/index.js"
}

It is typical to only use POSTs for interactions with Apollo through the API and GETs for interacting with the playground. Apollo can also be configured to allow for GETs when interacting with the API for cached results by using Automated Persisted Queries.

Additional Reading:

• Official Apollo documentation for setting up with Azure Functions